zoukankan      html  css  js  c++  java
  • 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>
    View Code

    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);
      }
    }
    View Code

    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
          }
      })
    View Code

    注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/8402

  • 相关阅读:
    [BJOI2019] 光线
    C# 从零开始写 SharpDx 应用 笔刷
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    PowerShell 拿到显卡信息
    PowerShell 拿到显卡信息
    win10 uwp 如何使用DataTemplate
    win10 uwp 如何使用DataTemplate
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4025605.html
Copyright © 2011-2022 走看看