HTML5 SVG超炫搜索图标和搜索框转换动画特效

这是一款效果非常炫酷的HTML5 SVG搜索图标和搜索框转换动画特效。该特效中使用SVG制作一个搜索按钮图标，在点击这个图标的时候，它会变形转换为一个圆角的搜索框。当点击搜索框的关闭按钮时，搜索框又转换为搜索图标。

制作方法

HTML结构

该搜索框特效使用一个<svg>来制作搜索图标，搜索框中的关闭图标是一个空的<div>，使用CSS3将它制作为关闭图标。

<div class="search">
  <svg class="search-svg" viewBox="0 0 320 70"
       data-init="M160,3 L160,3 a27,27 0 0,1 0,54 L160,57 a27,27 0 0,1 0,-54 M197,67 181.21,51.21"
       data-mid="M160,3 L160,3 a27,27 0 0,1 0,54 L160,57 a27,27 0 0,1 0,-54 M179.5,49.5 179.5,49.5"
       data-active="M27,3 L293,3 a27,27 0 0,1 0,54 L27,57 a27,27 0 0,1 0,-54 M179.5,49.5 179.5,49.5">
    <path class="search-svg__path" d="M160,3 L160,3 a27,27 0 0,1 0,54 L160,57 a27,27 0 0,1 0,-54 M197,67 181.21,51.21" />
  </svg>
  <input type="text" class="search-input" />
  <div class="search-close"></div>
</div>            
              

CSS样式

在该搜索框特效的CSS样式中，整个搜索框采用绝对定位，被放置到屏幕的中间。所用的SVG被设置为无填充色，描边色为白色，描边宽度6像素。搜索框中的改变按钮使用伪元素来制作，分别使用transform:rotate()来将:before和:after伪元素进行旋转，组成一个小叉号。

.search-close.visible:before {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    opacity: 1;
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s;
            transition: transform 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s;
  }
  .search-close.visible:after {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
    -webkit-transition: -webkit-transform 0.2s 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s 0.2s;
            transition: transform 0.2s 0.2s cubic-bezier(0.73, 0.14, 0.4, 1.58), opacity 0.1s 0.2s;
  }
  .search-close:before, .search-close:after {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: 100%;
    height: 0.6rem;
    background: #fff;
    border-radius: 0.5rem;
    opacity: 0;
  }
  .search-close:before {
    -webkit-transform: rotate(-45deg) translateX(2rem);
        -ms-transform: rotate(-45deg) translateX(2rem);
            transform: rotate(-45deg) translateX(2rem);
    -webkit-transition: -webkit-transform 0.2s, opacity 0.1s 0.1s;
            transition: transform 0.2s, opacity 0.1s 0.1s;
  }
  .search-close:after {
    -webkit-transform: rotate(45deg) translateX(2rem);
        -ms-transform: rotate(45deg) translateX(2rem);
            transform: rotate(45deg) translateX(2rem);
    -webkit-transition: -webkit-transform 0.2s 0.2s, opacity 0.1s 0.3s;
            transition: transform 0.2s 0.2s, opacity 0.1s 0.3s;
  }           
              

JAVASCRIPT

该搜索框特效使用jQuery和snap.svg.js来制作SVG动画效果。代码中分别在搜索图标和搜索框的关闭按钮上绑定点击事件，在用户鼠标点击时使用snap.svg执行相应的SVG路径变形动画。

$(document).ready(function () {
      var $search = $('.search'), $input = $('.search-input'), $close = $('.search-close'), $svg = $('.search-svg'), $path = $('.search-svg__path')[0], initD = $svg.data('init'), midD = $svg.data('mid'), finalD = $svg.data('active'), backDelay = 400, midAnim = 200, bigAnim = 400, animating = false;
      $(document).on('click', '.search:not(.active)', function () {
          if (animating)
              return;
          animating = true;
          $search.addClass('active');
          Snap($path).animate({ 'path': midD }, midAnim, mina.backin, function () {
              Snap($path).animate({ 'path': finalD }, bigAnim, mina.easeinout, function () {
                  $input.addClass('visible');
                  $input.focus();
                  $close.addClass('visible');
                  animating = false;
              });
          });
      });
      $(document).on('click', '.search-close', function () {
          if (animating)
              return;
          animating = true;
          $input.removeClass('visible');
          $close.removeClass('visible');
          $search.removeClass('active');
          setTimeout(function () {
              Snap($path).animate({ 'path': midD }, bigAnim, mina.easeinout, function () {
                  Snap($path).animate({ 'path': initD }, midAnim, mina.easeinout, function () {
                      animating = false;
                  });
              });
          }, backDelay);
      });
  });