7款基于jquery的动画搜索框
无论是电商网站，还是媒体网，还是个人博客，每个网站都有属于自己个性化的搜索框。今天小编给大家带来7款基于jquery的动画搜索框。每个搜索框都采用了动画效果，一起看下效果图吧。
实现的代码。
html代码：
<h1>
CSS Animated Search Boxes</h1>
<p>
(with occasional help from javascript to assign focus)</p>
<div class="sample one">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search">
</button>
</div>
<div class="sample two">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search">
</button>
<button type="reset" class="btn btn-reset fa fa-times">
</button>
</div>
<div class="sample three">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search fa-flip-horizontal"></i>
</button>
</div>
<div class="sample four">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search fa-flip-horizontal"></i>
</button>
<button type="reset" class="btn btn-reset fa fa-times">
</button>
</div>
<div class="sample five">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search fa-flip-horizontal"></i>
</button>
</div>
<div class="sample six">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search fa-flip-horizontal"></i>
</button>
<button type="reset" class="btn btn-reset fa fa-times">
</button>
</div>
<div class="sample seven">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
</div>
<div class="sample eight">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
<button type="reset" class="btn btn-reset fa fa-times">
</button>
</div>
<div class="sample nine">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
</div>
<div class="sample ten">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
<button type="reset" class="btn btn-reset fa fa-times">
</button>
</div>
<div class="sample eleven">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
</div>
<div class="sample twelve">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
<button type="reset" class="btn btn-reset fa fa-times">
</button>
</div>
<div class="sample thirteen">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
</div>
<div class="sample fourteen">
<input type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search">
<i class="fa fa-search"></i>
</button>
<button type="reset" form="form" class="btn btn-reset fa fa-times">
</button>
</div>
css代码：
* {
box-sizing: border-box;
}
html,
body {
font-size: 12px;
}
h1 {
margin: 10px 0 0;
text-align: center;
}
p {
margin: 0 0 20px;
text-align: center;
}
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 50%;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
button.btn-search, button.btn-reset {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
}
.sample {
float: left;
height: 50px;
margin: 0 8%;
position: relative;
width: 34%;
}
.sample.one input, .sample.two input {
border-radius: 15px;
right:;
transition: all .3s ease-in-out;
width: 50%;
}
.sample.one input:focus, .sample.two input:focus {
width: 100%;
}
.sample.one input:focus ~ button.btn-search, .sample.two input:focus ~ button.btn-search {
background: hotpink;
color: #fff;
}
.sample.one input:focus ~ button.btn-reset, .sample.two input:focus ~ button.btn-reset {
right: -22px;
}
.sample.one button, .sample.two button {
transition: all .3s ease-in-out;
}
.sample.one button.btn-search, .sample.two button.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.sample.one button.btn-reset, .sample.two button.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 10px;
height: 20px;
line-height: 20px;
padding:;
right: 5px;
top: 5px;
width: 20px;
z-index: -1;
}
.sample.three, .sample.four {
perspective: 400px;
}
.sample.three input, .sample.four input {
width: 120px;
}
.sample.three input:focus ~ button.btn-search, .sample.four input:focus ~ button.btn-search {
transform: rotateY(180deg);
transition: transform .6s ease-in-out .2s;
}
.sample.three input:focus ~ button.btn-reset, .sample.four input:focus ~ button.btn-reset {
transform: rotateX(0deg) translateY(32px) translateX(2px);
transition: transform .6s ease-in-out .8s;
}
.sample.three button.btn-search, .sample.four button.btn-search {
backface-visibility: visible;
color: #fff;
padding:;
position: relative;
transform: rotateY(0deg);
transform-origin: 121px 0;
transform-style: preserve3d;
transition: transform .6s ease-in-out .2s;
width: 120px;
}
.sample.three button.btn-reset, .sample.four button.btn-reset {
backface-visibility: hidden;
background: #ccc;
transform: rotateX(-180deg) translateY(30px) translateX(2px);
transform-origin: 0 32px;
transform-style: preserve3d;
transition: transform .6s ease-in-out .2s;
width: 120px;
}
.sample.four button.btn-search {
transition: transform .6s ease-in-out .8s;
}
.sample.five, .sample.six {
perspective: 400px;
}
.sample.five input, .sample.six input {
width: 120px;
}
.sample.five input:focus ~ button.btn-search, .sample.six input:focus ~ button.btn-search {
transform: rotateY(180deg) translateX(60px);
transition: all .6s ease-in-out .2s;
width: 60px;
}
.sample.five input:focus ~ button.btn-reset, .sample.six input:focus ~ button.btn-reset {
transform: rotateY(0deg);
transition: all .6s ease-in-out .8s;
}
.sample.five button.btn-search, .sample.six button.btn-search {
backface-visibility: visible;
color: #fff;
padding:;
position: relative;
transform: rotateY(0deg) translateX(0px);
transform-origin: 121px 0;
transform-style: preserve3d;
transition: all .6s ease-in-out .2s;
width: 120px;
}
.sample.five button.btn-reset, .sample.six button.btn-reset {
backface-visibility: hidden;
background: #ccc;
left: 184px;
transform: rotateY(180deg);
transform-origin: left 0;
transform-style: preserve3d;
transition: all .6s ease-in-out .2s;
width: 60px;
}
.sample.six button.btn-search {
transition: all .6s ease-in-out .8s;
}
.sample.seven input, .sample.eight input {
border-right: none;
transition: all .3s ease-in;
width: 120px;
}
.sample.seven input:focus, .sample.eight input:focus {
width: 220px;
}
.sample.seven input:focus ~ button.btn-search, .sample.eight input:focus ~ button.btn-search {
background: hotpink;
border-radius: 0 50% 50% 0;
color: #fff;
left: 220px;
}
.sample.seven input:focus ~ button.btn-reset, .sample.eight input:focus ~ button.btn-reset {
animation: bounceRight .6s;
animation-delay: .2s;
animation-timing-function: cubic-bezier(0.3, 0.2, 1, 0.8);
border-radius: 50%;
color: #fff;
left: 254px;
}
.sample.seven button.btn-search, .sample.eight button.btn-search {
background: #ccc;
left: 120px;
transition: all .3s ease-in;
}
.sample.seven button.btn-reset, .sample.eight button.btn-reset {
background: #000;
height: 20px;
left: 120px;
top: 5px;
transition: all .3s ease-in;
width: 20px;
z-index: -1;
}
.sample.nine input, .sample.ten input {
border-radius: 15px;
transition: all .6s ease-in-out .3s;
width: 120px;
}
.sample.nine input:focus, .sample.ten input:focus {
transition-delay:;
width: 200px;
}
.sample.nine input:focus ~ button, .sample.ten input:focus ~ button {
transform: rotateZ(360deg);
}
.sample.nine input:focus ~ button.btn-search, .sample.ten input:focus ~ button.btn-search {
background: hotpink;
color: #fff;
left: 172px;
transition-delay:;
}
.sample.nine input:focus ~ button.btn-reset, .sample.ten input:focus ~ button.btn-reset {
left: 202px;
transition-delay: .3s;
}
.sample.nine button, .sample.ten button {
transition: all .6s ease-in-out;
}
.sample.nine button.btn-search, .sample.ten button.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
left: 92px;
top: 2px;
transition-delay: .3s;
width: 26px;
}
.sample.nine button.btn-reset, .sample.ten button.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 10px;
height: 20px;
left: 92px;
line-height: 20px;
padding:;
top: 5px;
width: 20px;
z-index: -1;
}
.sample.eleven input, .sample.twelve input {
border-radius: 15px;
transition: all .6s ease-in-out;
width: 120px;
}
.sample.eleven input:focus, .sample.twelve input:focus {
width: 200px;
}
.sample.eleven input:focus ~ button.btn-search, .sample.twelve input:focus ~ button.btn-search {
animation: jumpTowardSearch 1.2s linear;
background: hotpink;
color: #fff;
left: 172px;
}
.sample.eleven input:focus ~ button.btn-reset, .sample.twelve input:focus ~ button.btn-reset {
animation: jumpTowardReset 1.2s linear .4s;
left: 202px;
}
.sample.eleven button, .sample.twelve button {
transition: all .6s ease-in-out;
}
.sample.eleven button.btn-search, .sample.twelve button.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
left: 92px;
top: 2px;
width: 26px;
}
.sample.eleven button.btn-reset, .sample.twelve button.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 10px;
height: 20px;
left: 92px;
line-height: 20px;
padding:;
top: 5px;
width: 20px;
z-index: -1;
}
.sample.thirteen input, .sample.fourteen input {
background: none;
border-color: #000;
border-radius: 15px;
border-width: 0 0 1px;
transition: all .8s ease-in-out;
width: 30px;
}
.sample.thirteen input:focus, .sample.fourteen input:focus {
background: radial-gradient(ellipse at top left, rgba(0, 0, 0, 0) 65%, #ff69b4 140%);
border-radius: 0 15px 15px 0;
width: 250px;
}
.sample.thirteen input:focus ~ button.btn-search, .sample.fourteen input:focus ~ button.btn-search {
background: hotpink;
color: #fff;
left: 222px;
transform: rotate(720deg);
}
.sample.thirteen input:focus ~ button.btn-reset, .sample.fourteen input:focus ~ button.btn-reset {
left: 256px;
transform: rotate(360deg);
}
.sample.thirteen button, .sample.fourteen button {
transition: all .8s ease-in-out;
}
.sample.thirteen button.btn-search, .sample.fourteen button.btn-search {
background: #ccc;
border: 1px solid #000;
border-radius: 50%;
height: 30px;
left:;
width: 30px;
}
.sample.thirteen button.btn-reset, .sample.fourteen button.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 10px;
height: 20px;
left: 2px;
line-height: 20px;
padding:;
top: 10px;
width: 20px;
z-index: -1;
}
@keyframes bounceRight {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0px);
}
}
@keyframes jumpTowardSearch {
0% {
background: #ccc;
opacity:;
transform: rotateZ(0deg) scale(1);
}
20% {
background: #ccc;
opacity:;
transform: rotateZ(-60deg) scale(50);
}
55% {
background: hotpink;
opacity:;
transform: rotateZ(-30deg) scale(100);
}
90% {
background: hotpink;
opacity:;
transform: rotateZ(-30deg) scale(50);
}
100% {
background: hotpink;
opacity:;
transform: rotateZ(0deg) scale(1);
}
}
@keyframes jumpTowardReset {
0% {
opacity:;
transform: rotateZ(0deg) scale(1);
}
20% {
opacity:;
transform: rotateZ(-60deg) scale(50);
}
55% {
opacity:;
transform: rotateZ(-30deg) scale(100);
}
90% {
opacity:;
transform: rotateZ(-30deg) scale(50);
}
100% {
opacity:;
transform: rotateZ(0deg) scale(1);
}
}
js代码：
$('body')
.on('click', 'div.three button.btn-search', function (event) {
event.preventDefault();
var $input = $('div.three input');
$input.focus();
if ($input.val().length() > 0) {
// submit form
}
})
.on('click', 'div.four button.btn-search', function (event) {
event.preventDefault();
var $input = $('div.four input');
$input.focus();
if ($input.val().length() > 0) {
// submit form
}
})
.on('click', 'div.five button.btn-search', function (event) {
event.preventDefault();
var $input = $('div.five input');
$input.focus();
if ($input.val().length() > 0) {
// submit form
}
})
.on('click', 'div.six button.btn-search', function (event) {
event.preventDefault();
var $input = $('div.six input');
$input.focus();
if ($input.val().length() > 0) {
// submit form
}
})
.on('click', 'div.seven button.btn-search', function (event) {
event.preventDefault();
var $input = $('div.seven input');
$input.focus();
if ($input.val().length() > 0) {
// submit form
}
})
.on('click', 'div.eight button.btn-search', function (event) {
event.preventDefault();
var $input = $('div.eight input');
$input.focus();
if ($input.val().length() > 0) {
// submit form
}
})
.on('click', 'div.thirteen button.btn-search', function (event) {
event.preventDefault();
var $input = $('div.thirteen input');
$input.focus();
if ($input.val().length() > 0) {
// submit form
}
})
.on('click', 'div.fourteen button.btn-search', function (event) {
event.preventDefault();
var $input = $('div.fourteen input');
$input.focus();
if ($input.val().length() > 0) {
// submit form
}
})
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/8402
7款基于jquery的动画搜索框的更多相关文章
- 基于jQuery select下拉框美化插件
分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 源码下 ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
- 10款基于jquery实现的超酷动画源码
1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 一款基于jquery的喜欢动画按钮
今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <p class='heading'> C ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
随机推荐
- Filezilla开源FTP传输工具
生于忧患,死于安乐!在进取中思考... 官网:https://filezilla-project.org/ #FileZilla截图 免费.开源的FTP链接工具! 云下载: http://pan.ba ...
- 【云栖大会】阿里巴巴集团CTO张建锋:用计算和数据去改变整个世界
摘要: 当浩瀚的数字化信息能够联网在线,在万物互联网的新世界中,所有东西都可能有感知.变智能,想象一下电表.冰箱.心电图监测仪等设备的信息都能数字化并联网,从城市管理到个人生活,都会迎来翻天覆地的变化 ...
- POJ 1159 Palindrome(区间DP/最长公共子序列+滚动数组)
Palindrome Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 56150 Accepted: 19398 Desc ...
- 最新最全的iOS手机支付总结
关于手机支付,我想简单总结一下,我想主要分成三大类: 第一类,就是我们最常见的应用内支付(IAP),例如APPStore里面我们可以付费下载一些APP或者游戏. 第二类,就是我们经常使用第三方支付,例 ...
- iOS:即时通讯之<了解篇 SocKet>
什么是socket? 计算机专业术语就是: 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.Socket的英文原义是“孔”或“插座”.作为BSD UNIX的进 ...
- Linux vm运行参数 - overcommit相关的参数
一.前言 终于可以进入Linux kernel内存管理的世界了,但是从哪里入手是一个问题,当面对一个复杂系统的时候,有时候不知道怎么开始.遵守“一切以人为本”的原则,我最终选择先从从userspace ...
- if else和switch的效率
switch和if-else相比,由于使用了Binary Tree算法,绝大部分情况下switch会快一点,除非是if-else的第一个条件就为true. 说实话 我也没有深入研究过这个问题的根源 ...
- ubuntu的apt-get提示资源被锁定
一.错误提示 E: Could not : Resource temporarily unavailable) E: Unable to lock the administration directo ...
- 【服务器防护】linux 如何查看防火墙是否开启
service iptables status可以查看到iptables服务的当前状态.但是即使服务运行了,防火墙也不一定起作用,你还得看防火墙规则的设置 iptables -L在此说一下关于启动和关 ...
- 高效使用 JavaScript 闭包,避免 Node.js 应用程序中的内存泄漏
在 Node.js 中,广泛采用不同形式的闭包来支持 Node 的异步和事件驱动编程模型.通过很好地理解闭包,您可以确保所开发应用程序的功能正确性.稳定性和可伸缩性. 闭包是一种将数据与处理数据的代码 ...