当您在输入框输入文字的时候,输入框中就会出现很漂亮的粒子动画特效,并且输入框的四周边框将会出现发光的效果,效果很不错。
input {
border: 2px solid #5E6C77;
font-size: 1.5em;
padding: .25em .5em .3125em;
color: #5E6C77;
border-radius: .25em;
background: transparent;
-webkit-transition: all .100s;
transition: all .100s;
margin:80px auto;
}
input:focus {
outline: none;
color: #A2ACB3;
border-color: #A2ACB3;
}
input.keyup {
color: white;
border-color: white;
text-shadow: 0 0 .125em white;
box-shadow: 0 0 .25em white,inset 0 0 .25em white;
}
body {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
}
input {
font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif;
}
::-webkit-input-placeholder {
color: #5E6C77;
text-shadow: 0 0 .125em transparent;
-webkit-transition: all .25s;
transition: all .25s;
}
input:focus::-webkit-input-placeholder {
opacity: .5;
}
::-moz-placeholder {
color: #5E6C77;
text-shadow: 0 0 .125em transparent;
-webkit-transition: all .25s;
transition: all .25s;
}
input:focus::-moz-placeholder {
opacity: .5;
}
:-ms-input-placeholder {
color: #5E6C77;
text-shadow: 0 0 .125em transparent;
-webkit-transition: all .25s;
transition: all .25s;
}
input:focus:-ms-input-placeholder {
opacity: .5;
}
html, body {
height: 100%;
overflow: hidden;
}
html {
background: #282E33;
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791