JQuery+CSS3超炫酷搜索框

所属分类：其他,输入-动画效果,搜索

74708 753 查看评论 (10)

分享到微信朋友圈

查看演示立即下载

插件描述：一款用JQuery和CSS3组合的超炫酷的搜索框

iSlider手机端图片滑动切换插件

jQuery图片左右切换

CSS3提交按钮动画特效

这个提交按钮效果有两组动画：当屏幕大于800px的时候是一个动画效果，当屏幕小于800像素的时候是另一种动画效果。缩放你的浏览器看看不同的提交按钮动画效果吧！

动画效果

44487 428

jQuery延时动画插件aniAuto

该插件主要用于执行Animate.css动画库，可以实现动画延时，队列，执行时间，滞后执行，重复执行等

动画效果

35182 379

讨论这个项目（10）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

. 3

2022/8/14 14:52:01

更改大小：
①先更改css中.search-wrapper .input-holder 的height值（要多少改多少）
②然后更改css中search-wrapper .input-holder .search-icon 的height和width（两者一致）
③改过之后要调整输入框大小。更改CSS中search-wrapper .input-holder .search-input的height为你设置的值减去20px（这样做是为了居中）
④最后更改CSS中search-wrapper.active .input-holder .search-icon的width和height（两值一定要一样）

更改输入栏长度：
search-wrapper.active .input-holder的width

更改关闭符号大小：
.search-wrapper .close::before和.search-wrapper .close::after的width和height

回车之后显示的是js读取的输入框内容，需要自己绑定事件来实现搜索

Html：

<div class="search-wrapper (active)">

active控制默认情况下搜索栏是否展开

CSS中：

/*整个组件的容器*/
.search-wrapper {
	}/**/
.search-wrapper.active {
	}/*容器(打开前)*/
.search-wrapper .input-holder {
	}/*容器(打开后)*/
.search-wrapper.active .input-holder {
	}/*搜索输入栏大小（点击前）*/
.search-wrapper .input-holder .search-input {
	}/*搜索输入栏大小（点击后）*/
.search-wrapper.active .input-holder .search-input {
	}/*搜索图标（点击前）*/
.search-wrapper .input-holder .search-icon {
	}/*搜索图标（点击后）大小*/
.search-wrapper.active .input-holder .search-icon {
	}/**/
.search-wrapper .input-holder .search-icon span {
	}/**/
.search-wrapper.active .input-holder .search-icon span {
	}/**/
.search-wrapper .input-holder .search-icon span::before,.search-wrapper .input-holder .search-icon span::after {
	}/*搜索图标（放大镜）点击前*/
.search-wrapper .input-holder .search-icon span::before {
	}/*搜索图标（放大镜）点击后*/
.search-wrapper .input-holder .search-icon span::after {
	}/*关闭按钮*/
.search-wrapper .close {
	}/**/
.search-wrapper.active .close {
	}/**/
.search-wrapper .close::before,.search-wrapper .close::after {
	}/**/
.search-wrapper .close::before {
	}/**/
.search-wrapper .close::after {
	}/*搜索结果框*/
.search-wrapper .result-container {
	}