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: 0;
  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: 0;
  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: 0;
  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: 0;
  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: 0;
  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: 0;
}
.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: 0;
  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: 0;
  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: 0;
  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: 0;
  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: 1;
    transform: rotateZ(0deg) scale(1);
  }
  20% {
    background: #ccc;
    opacity: 0;
    transform: rotateZ(-60deg) scale(50);
  }
  55% {
    background: hotpink;
    opacity: 0;
    transform: rotateZ(-30deg) scale(100);
  }
  90% {
    background: hotpink;
    opacity: 0;
    transform: rotateZ(-30deg) scale(50);
  }
  100% {
    background: hotpink;
    opacity: 1;
    transform: rotateZ(0deg) scale(1);
  }
}
@keyframes jumpTowardReset {
  0% {
    opacity: 0;
    transform: rotateZ(0deg) scale(1);
  }
  20% {
    opacity: 0;
    transform: rotateZ(-60deg) scale(50);
  }
  55% {
    opacity: 0;
    transform: rotateZ(-30deg) scale(100);
  }
  90% {
    opacity: 0;
    transform: rotateZ(-30deg) scale(50);
  }
  100% {
    opacity: 1;
    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

时间： 2024-08-04 01:50:08

7款基于jquery的动画搜索框的相关文章

分享10款基于jquery和css3的web前端的动画特效

1.响应式圆形动画导航菜单 响应式的移动导航栏,现在我发现了一个新的技术(有关HTML5)可以在没有使用Javascript的情况下做一个响应式菜单.这个菜单可以自动排列到左边.中间或者右边).不像之前的教程需要点击某"开关"来显示或隐藏菜单,现在只需要把鼠标移到菜单按钮就会出现菜单列表(而且会提示当前所在的导航位置). 在线演示 源码下载 2.Canvas 示例:4种超炫的网站动画背景效果 今天,我们想分享一些动画背景的灵感.全屏背景图片的网站头部是最新的网页设计趋势,已经持续了一段

基于jQuery select下拉框美化插件

今天给大家分享一款基于jQuery select下拉框美化插件,这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.  <table>         <tr>             <td>                 <h2>                     演示1</h2>                 <select name="drop1&qu

10款基于jquery的web前端动画特效

1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画,鼠标滑过图片时即可展开,并且图片上方有文字标题,非常实用. 在线演示 源码下载 2.jQuery/CSS3渐变颜色拾取器 之前我们向大家分享过一款功能十分强大的jQuery颜色拾取器,支持透明度的选取.今天要为大家介绍的同样是一款基于jQuer

一款基于jquery ui的动画提交表单

今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div align="center"> <form id="myform"> <div id="bloc_recherche_couleur"> <div id="etape0_recherche&

分享一款基于jquery的圆形动画按钮

之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: 在线预览   源码下载 实现的代码. html代码: <figure class='red'> <div class='icon'> i</div> <div class='circle'> </div> </figure> <f

8款基于Jquery的WEB前端动画特效

1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮时,按钮的背景就会播放不同的动画特效.这款jQuery按钮插件的使用方法也很简单,给按钮指定一个类,然后用一行JS代码初始化即可. 在线演示 源码下载 2.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画

10款基于jQuery的图片滑块焦点图插件

1.Material UI – Material Design CSS 框架 Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点.Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件.可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 J

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

10款基于jQuery实现的鼠标悬停九宫格图片延伸效果

<p><b>1.jQuery多张图片上下叠加切换插件</b></p><p>之前我们已经向大家分享过一款jQuery/CSS3洗牌效果的图片叠加切换应用,本文介绍的这款jQuery多张图片上下叠加切换插件也类似,我们可以将预先加载好的图片按不同的角度叠加起来,点击上下切换按钮时即可将图片上下切换至其他图片后面,效果非常不错.</p><p><img src="http://www.html5tricks.com