WebFlow网站彩虹波动下边沿的输入框

CSS3 Webflow-style input Source: https://webflow.com/cms

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    box-sizing: border-box;
    font-size: 10px;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body,
ul,
li {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}
a {
    text-decoration: none;
}
input {
    border-style: none;
    background: transparent;
    outline: none;
}
button {
    padding: 0;
    background: none;
    border: none;
    outline: none;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-image: -webkit-radial-gradient(0% 0%, circle, #373b52, #252736 51%, #1d1e26);
    background-image: radial-gradient(circle at 0% 0%, #373b52, #252736 51%, #1d1e26);
}
h1.demo {
    text-align: center;
    font-size: 2.4rem;
    font-weight: normal;
    margin-bottom: 1rem;
    color: #f5f6ff;
}
a.demo {
    text-align: center;
    font-size: 1.6rem;
    font-weight: normal;
    color: rgba(202, 205, 239, 0.8);
    margin-bottom: 3rem;
}
.demo-flex-spacer {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    max-width: 1600px;
    padding: 0 15px;
    margin: 0 auto;
}
@-webkit-keyframes gradient {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}
@keyframes gradient {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}
.webflow-style-input {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 2px;
    padding: 1.4rem 2rem 1.6rem;
    background: rgba(57, 63, 84, 0.8);
}
.webflow-style-input:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 999;
    height: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    background-position: 0% 0%;
    background: -webkit-linear-gradient(left, #b294ff, #57e6e6, #feffb8, #57e6e6, #b294ff, #57e6e6);
    background: linear-gradient(to right, #b294ff, #57e6e6, #feffb8, #57e6e6, #b294ff, #57e6e6);
    background-size: 500% auto;
    -webkit-animation: gradient 3s linear infinite;
    animation: gradient 3s linear infinite;
}
.webflow-style-input input {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    color: #bfd2ff;
    font-size: 1.8rem;
    line-height: 2.4rem;
    vertical-align: middle;
}
.webflow-style-input input::-webkit-input-placeholder {
    color: #7881a1;
}
.webflow-style-input button {
    color: #7881a1;
    font-size: 2.4rem;
    line-height: 2.4rem;
    vertical-align: middle;
    -webkit-transition: color 0.25s;
    transition: color 0.25s;
}
.webflow-style-input button:hover {
    color: #bfd2ff;
}

HTML

CSS3 Webflow-style input Source: https://webflow.com/cms

编辑器支持Emmet

快捷键

CSS3 Webflow-style input Source: https://webflow.com/cms

使用css flexbox（弹性框）实现的响应式布局网站模板

WebGL Three.js 彩虹液态物质（液体）动画特效的着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：