html5图标经过效果,HTML5 SVG超炫搜索图标和搜索框转换动画特效

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

制作方法

HTML结构

该搜索框特效使用一个来制作搜索图标，搜索框中的关闭图标是一个空的

，使用CSS3将它制作为关闭图标。

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">

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);

});

});