CSS3 搜索输入框的变形动画

Nearly CSS3 Animated Search Input

search，input

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

第三方库
作品简介 4175
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    background-color: #E62878;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
}
p {
    text-align: center;
    color: #fff;
    font-size: 14px;
}
h4 {
    color: #fff;
    text-align: center;
    letter-spacing: 0.5px;
    transform: scale(0);
    transition: all 0.3s;
    position: relative;
    top: -25px;
    margin: 0;
    font-weight: normal;
}
h4.show {
    animation: alert 0.18s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes alert {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
form {
    transition: all 0.15s;
}
form.explode {
    transform: scale(1.4);
    opacity: 0;
}
html {
    padding-top: 100px;
}
form {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    position: relative;
}
input[type="submit"] {
    display: none !important;
}
input {
    width: 100%;
}
input {
    background: none;
    border: 3px solid #fff;
    border-radius: 26px;
    box-sizing: border-box;
    padding: 5px 15px 7px;
    font-size: 14px;
    color: #fff;
    z-index: 2;
    position: relative;
}
input:focus {
    outline: none;
}
.after {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 1;
}
form.open .after {
    cursor: pointer;
}
.after:before,
.after:after {
    content: '';
    width: 13px;
    height: 3px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    transform-origin: 100% 100%;
}
.after:after {
    bottom: -3px;
    right: -3px;
    transform: rotate(45deg);
}
.after:before {
    top: -3px;
    right: -3px;
    transform: rotate(-45deg);
    opacity: 0;
}
form,
form .after,
form .after:before,
form .after:after {
    animation-duration: 1.1s;
    animation-fill-mode: forwards;
}
form.in {
    animation-name: expand;
}
form.in .after:before {
    animation-name: beforemagic;
}
form.in .after:after {
    animation-name: aftermagic;
}
form.close,
form.close .after,
form.close .after:before,
form.close .after:after {
    animation-direction: reverse;
}
form.close {
    animation-name: expand;
}
form.close .after:before {
    animation-name: beforemagic;
}
form.close .after:after {
    animation-name: aftermagic;
}
/* Hold final focused state
 ****************************/

form.open {
    width: 250px;
    color: #fff;
}
form.open .after {
    z-index: 3;
}
form.open .after:before {
    width: 20px;
    top: 9px;
    right: 13px;
    opacity: 1;
}
form.open .after:after {
    width: 20px;
    bottom: 10px;
    right: 15px;
}
@keyframes aftermagic {
    0% {} 10% {
        width: 24px;
        bottom: -10px;
        right: -10px;
    }
    15% {
        opacity: 1;
    }
    35% {
        width: 13px;
        bottom: -3px;
        right: -3px;
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    64% {
        opacity: 0;
    }
    65% {
        opacity: 1;
        width: 13px;
        bottom: -2px;
        right: -3px;
    }
    75% {
        width: 30px;
        bottom: 4px;
        right: 10px;
    }
    90% {
        width: 20px;
        bottom: 10px;
        right: 15px;
    }
    100% {
        width: 20px;
        bottom: 10px;
        right: 15px;
    }
}
@keyframes beforemagic {
    0% {} 50% {
        opacity: 0;
    }
    55% {
        opacity: 1;
        width: 13px;
        top: -4px;
        right: -3px;
    }
    65% {
        width: 30px;
        top: 6px;
        right: 10px;
    }
    80% {
        width: 20px;
        top: 9px;
        right: 13px;
    }
    100% {
        width: 20px;
        top: 9px;
        right: 13px;
        opacity: 1;
    }
}
@keyframes expand {
    0% {
        color: transparent;
    }
    20% {
        width: 36px;
    }
    45% {
        width: 250px;
    }
    99% {
        color: transparent;
    }
    100% {
        width: 250px;
        color: #fff;
    }
}

HTML

Nearly CSS3 Animated Search Input

search，input

编辑器支持Emmet

快捷键

Nearly CSS3 Animated Search Input

search，input

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：