一款有趣的搜索输入框变形动效

Search field animation

css3, search, input, widget

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2607
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

$('.search').each(function() {

var self = $(this);
        var form = self.children('form');
        var input = form.children('input');
        var span = $('<span />').appendTo(form);
        var bar = self.children('.bar');
        var close = self.children('.close');

input.keypress(function(e) {
            if (e.which && e.charCode) {
                resizeForText(input, span, $(this).val() + String.fromCharCode(e.keyCode | e.charCode));
            }
        });

input.keyup(function(e) {
            if (e.keyCode === 8 || e.keyCode === 46) {
                resizeForText(input, span, $(this).val());
            }
        });

resizeForText(input, span, self.val());

form.submit(function(e) {
            e.preventDefault();
            if (!self.hasClass('prepare')) {
                input.blur();
                $('<span />').text(input.val()).appendTo(bar);
                self.addClass('prepare submit');
                setTimeout(function() {
                    self.removeClass('submit');
                }, 200);
                setTimeout(function() {
                    self.addClass('animate');
                    bar.animate({
                        width: (self.outerWidth() - 32)
                    }, 1000);
                    setTimeout(function() {
                        self.addClass('done');
                    }, 800);
                }, 1250);
            }
        });

close.on('click', function(e) {
            self.removeClass('done');
            setTimeout(function() {
                input.val('');
                bar.animate({
                    width: 32
                }, 600, function() {
                    self.addClass('reset');
                    bar.children('span').remove();
                    setTimeout(function() {
                        self.removeClass('animate reset prepare');
                        setTimeout(function() {
                            input.animate({
                                width: 32
                            }, 400, function() {
                                bar.removeAttr('style');
                            });
                        }, 200);
                    }, 400);
                });
            }, 500);
        });

});

function resizeForText(input, span, text) {
    text = (!text) ? ' ' : text;
    span.text(text);
    input.width(span.width() + 2);
}

编译

CSS

.search {
    background: #fff;
    padding: 12px 16px 12px 48px;
    position: relative;
    display: table;
    margin: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px -1px rgba(18, 22, 33, 0.1);
    transition: background .1s ease, padding .5s ease .1s, -webkit-transform .1s ease;
    transition: background .1s ease, transform .1s ease, padding .5s ease .1s;
    transition: background .1s ease, transform .1s ease, padding .5s ease .1s, -webkit-transform .1s ease;
}
.search .bar {
    position: absolute;
    left: 16px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 0;
    overflow: hidden;
}
.search .bar span {
    display: block;
    color: #fff;
    position: absolute;
    left: 12px;
    top: 0;
    line-height: 32px;
    font-weight: 500;
    font-size: 16px;
    opacity: 0;
    right: 16px;
    overflow: hidden;
    white-space: nowrap;
}
.search .bar:before {
    content: '';
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    right: 16px;
    border-radius: 16px 0 0 16px;
    background: #5628EE;
    opacity: 0;
}
.search .bar .icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    background: #5628EE;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    transition: background .1s ease, -webkit-transform .4s ease 0s;
    transition: transform .4s ease 0s, background .1s ease;
    transition: transform .4s ease 0s, background .1s ease, -webkit-transform .4s ease 0s;
}
.search .bar .icon:before,
.search .bar .icon:after {
    content: '';
    display: block;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 50%;
}
.search .bar .icon:before {
    background: #fff;
    left: 4px;
    top: 4px;
    right: 4px;
    bottom: 4px;
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    transition: background .1s ease;
}
.search .bar .icon:after {
    background: #5628EE;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transition: background .1s ease;
}
.search .bar .icon i {
    left: 75%;
    top: 84%;
    position: absolute;
    display: block;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.search .bar .icon i:before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: #5628EE;
    display: block;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    transition: background .1s ease, -webkit-transform .4s ease 0s;
    transition: transform .4s ease 0s, background .1s ease;
    transition: transform .4s ease 0s, background .1s ease, -webkit-transform .4s ease 0s;
}
.search form {
    display: block;
    padding: 0;
    margin: 0;
}
.search form input,
.search form span {
    white-space: pre;
    font-size: 16px;
    font-family: inherit;
    padding: 8px 16px 8px 12px;
    display: block;
    line-height: 22px;
    font-weight: 500;
    min-width: 0;
}
.search form input {
    color: #8C6FF0;
    caret-color: #8C6FF0;
    border: 0;
    background: 0;
    outline: 0;
    transition: color .1s ease;
}
.search form span {
    display: none;
}
.search .close {
    border-radius: 50%;
    position: absolute;
    right: 16px;
    width: 24px;
    height: 24px;
    background: #E4ECFA;
    top: 50%;
    margin: -12px 0 0 0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(-8px, 0);
    transform: translate(-8px, 0);
    transition: opacity .3s ease 0s, visibility .3s ease 0s, -webkit-transform .3s ease 0s;
    transition: transform .3s ease 0s, opacity .3s ease 0s, visibility .3s ease 0s;
    transition: transform .3s ease 0s, opacity .3s ease 0s, visibility .3s ease 0s, -webkit-transform .3s ease 0s;
}
.search .close:before,
.search .close:after {
    content: '';
    position: absolute;
    width: 2px;
    border-radius: 1px;
    height: 10px;
    background: #6C7486;
    display: block;
    left: 50%;
    top: 50%;
    transition: background .3s ease;
}
.search .close:before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}
.search .close:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}
.search.submit {
    background: #5628EE;
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
}
.search.submit .bar .icon {
    background: #fff;
}
.search.submit .bar .icon:before {
    background: #5628EE;
}
.search.submit .bar .icon:after {
    background: #fff;
}
.search.submit .bar .icon i:before {
    background: #fff;
}
.search.submit form input {
    color: #fff;
}
.search.prepare .bar:before {
    opacity: 1;
    transition: opacity 0s ease 1.25s;
}
.search.prepare .bar .icon {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
    transition: background .1s ease, -webkit-transform .4s ease .85s, -webkit-transform-origin 0s ease 1.25s;
    transition: transform .4s ease .85s, transform-origin 0s ease 1.25s, background .1s ease;
    transition: transform .4s ease .85s, transform-origin 0s ease 1.25s, background .1s ease, -webkit-transform .4s ease .85s, -webkit-transform-origin 0s ease 1.25s;
}
.search.prepare .bar .icon i:before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    transition: background .1s ease, -webkit-transform .4s ease .4s;
    transition: transform .4s ease .4s, background .1s ease;
    transition: transform .4s ease .4s, background .1s ease, -webkit-transform .4s ease .4s;
}
.search.animate .bar .icon {
    -webkit-transform: rotateY(75deg);
    transform: rotateY(75deg);
    transition: -webkit-transform .6s ease 0s;
    transition: transform .6s ease 0s;
    transition: transform .6s ease 0s, -webkit-transform .6s ease 0s;
}
.search.animate .bar span {
    opacity: 1;
}
.search.done {
    padding-right: 56px;
    transition: padding .4s ease;
}
.search.done .bar .icon {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    transition: -webkit-transform .7s ease 0s;
    transition: transform .7s ease 0s;
    transition: transform .7s ease 0s, -webkit-transform .7s ease 0s;
}
.search.done .close {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    transition: opacity .4s ease .5s, visibility .4s ease .5s, -webkit-transform .4s ease .5s;
    transition: transform .4s ease .5s, opacity .4s ease .5s, visibility .4s ease .5s;
    transition: transform .4s ease .5s, opacity .4s ease .5s, visibility .4s ease .5s, -webkit-transform .4s ease .5s;
}
.search.done .close:hover {
    background: #8C6FF0;
    transition: background .3s ease;
}
.search.done .close:hover:before,
.search.done .close:hover:after {
    background: #fff;
}
.search.reset .bar:before {
    opacity: 0;
    transition: opacity 0s ease .4s;
}
.search.reset .bar .icon {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    transition: -webkit-transform .4s ease 0s;
    transition: transform .4s ease 0s;
    transition: transform .4s ease 0s, -webkit-transform .4s ease 0s;
}
em {
    color: #99A3BA;
    font-size: 12px;
    margin: 24px 0 0 0;
    display: block;
    opacity: .7;
    text-align: center;
    font-style: italic;
}
em strong {
    font-weight: bold;
}
html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
* {
    box-sizing: inherit;
}
*:before,
*:after {
    box-sizing: inherit;
}
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    background: #EDF0F9;
    display: flex;
    justify-content: center;
    align-items: center;
}
body .dribbble {
    position: fixed;
    display: block;
    right: 20px;
    bottom: 20px;
    opacity: .5;
    transition: all .4s ease;
}
body .dribbble:hover {
    opacity: 1;
}
body .dribbble img {
    display: block;
    height: 36px;
}

HTML

Search field animation

css3, search, input, widget

编辑器支持Emmet

快捷键

Search field animation

css3, search, input, widget

一款有趣的搜索输入界面动画：LOOK的O字母展开为输入框

HTML5一款带马赛克粒子化特效的搜索框界面控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：