22.图标动画搜索框

已于 2022-09-25 20:00:51 修改
阅读量313 收藏 1
点赞数
分类专栏： CSS创意特效(第四季) 文章标签： javascript css css3
于 2022-09-25 19:49:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq449245884/article/details/127041918
版权

效果 (源码网盘地址在最后)

在这里插入图片描述
关注公众号《大迁世界》，查看更多视频教程！

源码

index.hmtl

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Search Box</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="searchBox">
    <div class="search">
      <ion-icon name="search-outline"></ion-icon>
    </div>
    <div class="searchInput">
      <input type="text" placeholder="Search here . . .">
    </div>
    <div class="close">
      <ion-icon name="close-o
了解本专栏 订阅专栏 解锁全文 超级会员免费看
@大迁世界
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
用 vue+elemnet ui实现仿有赞首页搜索框点击放大input并展开下拉盒子的动画效果
m0_57454052的博客
04-20 1628
仿有赞首页搜索框点击放大input并展开下拉盒子的效果用elemnet ui实现
antd 中有选择的搜索框的使用
weixin_45343326的博客
09-27 4159
onSelect = (val, option) => { const initData = this.state.getByServerData; const fitList = initData.filter(r => r.ipAddress === option.props.text); const dataSource = { items: fitList, totalC...
html5图标下拉搜索框自动匹配代码
06-11
html5图标下拉搜索框自动匹配代码，在搜索框输入关键字文字自动下拉匹配列出包含关键字的图标。
点击搜索图标变成搜索框jsjs特效
ICode联盟
11-04 279
少量的js代码结合css代码实现的搜索特效，点击搜索图标变成搜索框js特效代码，效果很炫酷。
点击搜索图标动态缓缓弹出一个搜索框如何实现,运用js和css
weixin_42578963的博客
01-21 663
可以使用 JavaScript 在点击搜索图标时触发事件，并使用 CSS 实现搜索框的动画效果。 使用 JavaScript 监听点击事件，在点击搜索图标时执行相应的函数。 const searchIcon = document.querySelector('.search-icon'); searchIcon.addEventListener('click', function() { ...
vue-music 关于Search（搜索页面）--上拉加载
weixin_33682719的博客
06-13 161
建立搜索框组件页面，searchBox，组件接受一个可以自定义传入的placeholder 属性。input v-model 双向绑定数据关联到query 中， 在created中监听 query 变量将改变的新值派发给外部父组件，在search.vue 组件中将其引入 <div class="search-box"> <i class="icon-searc...
html5图标经过效果,HTML5 SVG超炫搜索图标和搜索框转换动画特效
weixin_29807369的博客
06-03 446
这是一款效果非常炫酷的HTML5 SVG搜索图标和搜索框转换动画特效。该特效中使用SVG制作一个搜索按钮图标，在点击这个图标的时候，它会变形转换为一个圆角的搜索框。当点击搜索框的关闭按钮时，搜索框又转换为搜索图标。制作方法HTML结构该搜索框特效使用一个来制作搜索图标，搜索框中的关闭图标是一个空的，使用CSS3将它制作为关闭图标。data-init="M160,3 L160,3 a27,27 0 ...
jQuery点击图标展开搜索框代码.zip
05-27
jQuery点击图标展开搜索框代码是一款创意搜索框，点击展开收缩动画特效。
HTML5 SVG超炫搜索图标和搜索框转换动画特效
12-12
这是一款效果非常炫酷的HTML5 SVG搜索图标和搜索框转换动画特效。该特效中使用SVG制作一个搜索按钮图标，在点击这个图标的时候，它会变形转换为一个圆角的搜索框。当点击搜索框的关闭按钮时，搜索框又转换为搜索图标...
jQuery点击图标展开搜索框特效代码
03-20
jQuery点击图标展开搜索框代码是一款创意搜索框，点击展开收缩动画特效。
CSS3制作炫酷搜索框动画特效
12-13
这是一款使用CSS3和jQuery制作的效果超酷的搜索框动画特效。该搜索框动画使用CSS3来制作，配合少量的JavaScript和jQuery代码来控制示例中的搜索事件。
antd select框加搜索栏 TreeSelect框加搜索框
qq_40137978的博客
01-04 1847
<Select options={contractOption} allowClear showSearch optionFilterProp="children" filterOption={(input, option: any) => option.la...
antd pro of vue:a-select多选加搜索框
qq_43016941的博客
07-26 5098
antd pro of vue:a-select多选加搜索框
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 596
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1454
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1325
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 557
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1288
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 847
Vue在表单校验中trigger属性指定何时触发校验规则
点击搜索图标搜索框弹出
07-27
可以使用JavaScript和CSS来实现点击搜索图标时搜索框的弹出效果。首先，你可以使用JavaScript来监听搜索图标的点击事件，并在点击时执行相应的函数。例如，你可以使用以下代码来实现这个功能： ```javascript const searchIcon = document.querySelector('.search-icon'); searchIcon.addEventListener('click', function() { // 在这里编写显示搜索框的代码 }); ``` 在这个代码中，我们使用`querySelector`方法选择了具有`.search-icon`类的搜索图标元素，并使用`addEventListener`方法为其添加了一个点击事件监听器。当搜索图标被点击时，相应的函数将被执行。 接下来，你可以使用CSS来实现搜索框的动画效果。你可以使用过渡或动画属性来实现搜索框的弹出效果。例如，你可以为搜索框添加一个过渡效果，使其在显示时具有平滑的动画效果。以下是一个示例CSS代码： ```css .search-box { /* 设置搜索框的初始状态 */ height: 0; opacity: 0; transition: height 0.3s, opacity 0.3s; } .search-box.show { /* 设置搜索框的显示状态 */ height: 50px; opacity: 1; } ``` 在这个代码中，我们为搜索框添加了一个`.search-box`类，并设置了其初始状态为高度为0且透明度为0。然后，我们使用过渡属性来定义搜索框的过渡效果，包括高度和透明度。当搜索框具有`.show`类时，它将具有高度为50px且完全可见的状态。 最后，当搜索图标被点击时，你可以使用JavaScript来添加或移除`.show`类，以触发搜索框的动画效果。以下是一个示例代码： ```javascript const searchIcon = document.querySelector('.search-icon'); const searchBox = document.querySelector('.search-box'); searchIcon.addEventListener('click', function() { searchBox.classList.toggle('show'); }); ``` 在这个代码中，我们使用`classList.toggle`方法来在搜索图标的点击事件中添加或移除`.show`类。这将触发搜索框的动画效果，使其在点击搜索图标时弹出或收起。 #### 引用[.reference_title] - *1* [点击搜索图标动态缓缓弹出一个搜索框如何实现,运用js和css](https://blog.csdn.net/weixin_42578963/article/details/129454372)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [html5搜索框特效点击搜索框弹出分类搜索框代码](https://blog.csdn.net/weixin_30946627/article/details/117759250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@大迁世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值