以下是 CSS3实现动态输入框input框特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3实现动态输入框input框特效</title>
<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
</style>
<style>
@charset "UTF-8";
/* 重置*/
*, *:before, *:after {
box-sizing: border-box;
}
/*容器设置*/
#container {
counter-reset: counterA;
}
/*布局实现*/
div.row {
position: relative;
width: 100%;
height: 20vw;
padding-left: 15vw;
counter-increment: counterA;
/*设置背景色，随机颜色*/
}
div.row:before {
content: counter(counterA);
color: rgba(255, 255, 255, 0.05);
font-size: 10vw;
position: absolute;
left: 0px;
}
div.row label {
position: relative;
display: block;
float: left;
margin: 8vw 2vw;
}
div.row label input {
width: 160px;
height: 30px;
line-height: 30px;
background: rgba(255, 255, 255, 0.1);
border: none;
outline: none;
border: 1px solid #fff;
color: #377D6A;
padding: 4px 10px;
border-radius: 4px;
text-indent: 38px;
transition: all .3s ease-in-out;
}
div.row label input ::-webkit-input-placeholder {
color: transparent;
}
div.row label input + span {
position: absolute;
left: 0;
top: 0;
color: #fff;
background: #7AB893;
display: inline-block;
padding: 7px 4px;
transform-origin: left center;
transform: perspective(300px);
transition: all .3s ease-in-out;
border-radius: 4px 0 0 4px;
}
div.row label input:focus,
div.row label input:active {
text-indent: 0;
background: rgba(255, 255, 255, 0.2);
}
div.row label input:focus ::-webkit-input-placeholder,
div.row label input:active ::-webkit-input-placeholder {
color: #f00;
}
div.row label input:focus + span,
div.row label input:active + span {
background: #478560;
}
div.row:nth-child(1) {
background: #1f3c7a;
}
div.row:nth-child(2) {
background: #2b7a1f;
}
div.row:nth-child(3) {
background: #1f537a;
}
div.row:nth-child(4) {
background: #507a1f;
}
div.row:nth-child(5) {
background: #7a461f;
}
div.row:nth-child(6) {
background: #1f687a;
}
div.row:nth-child(7) {
background: #1f7a40;
}
div.row:nth-child(8) {
background: #6d7a1f;
}
div.row:nth-child(9) {
background: #1f6e7a;
}
div.row:nth-child(10) {
background: #567a1f;
}
div.row:nth-child(11) {
background: #1f2e7a;
}
div.row:nth-child(12) {
background: #7a371f;
}
div.row:nth-child(13) {
background: #1f327a;
}
div.row:nth-child(14) {
background: #671f7a;
}
div.row:nth-child(15) {
background: #591f7a;
}
div.row:nth-child(1) input:focus,
div.row:nth-child(1) input:active {
border-radius: 0 4px 4px 0;
}
div.row:nth-child(1) input:focus + span,
div.row:nth-child(1) input:active + span {
border-radius: 4px 0 0 4px;
transform: translateX(-100%);
}
div.row:nth-child(2) input:focus + span,
div.row:nth-child(2) input:active + span {
border-radius: 0 4px 4px 0;
transform: translateX(300%);
}
div.row:nth-child(3) input:focus,
div.row:nth-child(3) input:active {
text-indent: 0px;
}
div.row:nth-child(3) input:focus + span,
div.row:nth-child(3) input:active + span {
background-color: transparent;
transform: translateY(-100%);
}
div.row:nth-child(4) input:focus,
div.row:nth-child(4) input:active {
text-indent: 0px;
}
div.row:nth-child(4) input:focus + span,
div.row:nth-child(4) input:active + span {
background-color: transparent;
transform: translateY(100%);
}
div.row:nth-child(5) input + span {
transform-origin: left bottom;
}
div.row:nth-child(5) input:focus,
div.row:nth-child(5) input:active {
border-radius: 0 4px 4px 0;
text-indent: 20px;
}
div.row:nth-child(5) input:focus + span,
div.row:nth-child(5) input:active + span {
transform: rotate(-60deg);
border-radius: 0 4px 4px 0;
}
div.row:nth-child(6) input + span {
transform-origin: left bottom;
}
div.row:nth-child(6) input:focus,
div.row:nth-child(6) input:active {
border-radius: 0 4px 4px 0;
}
div.row:nth-child(6) input:focus + span,
div.row:nth-child(6) input:active + span {
animation: swing 1s;
animation-fill-mode: forwards;
border-radius: 0 4px 4px 0;
}
@keyframes swing {
0% {
transform: rotate(0);
}
20% {
transform: rotate(116deg);
}
40% {
transform: rotate(60deg);
}
60% {
transform: rotate(98deg);
}
80% {
transform: rotate(76deg);
}
100% {
transform: rotate(82deg);
}
}
div.row:nth-child(7) input + span {
transform-origin: right center;
}
div.row:nth-child(7) input:focus,
div.row:nth-child(7) input:active {
border-radius: 0 4px 4px 0;
}
div.row:nth-child(7) input:focus + span,
div.row:nth-child(7) input:active + span {
transform: perspective(300px) translateX(-100%) rotateY(60deg);
}
div.row:nth-child(8) input:focus,
div.row:nth-child(8) input:active {
border-radius: 0 4px 4px 0;
}
div.row:nth-child(8) input:focus + span,
div.row:nth-child(8) input:active + span {
transform: rotateY(180deg);
border-radius: 0 4px 4px 0;
}
div.row:nth-child(9) input + span {
background: transparent;
}
div.row:nth-child(9) input + span:before {
content: "";
width: 0;
height: 0;
position: absolute;
left: 20px;
bottom: -10px;
border: 5px solid #000;
border-color: #478560 transparent transparent transparent;
transition: all .3s;
opacity: 0;
}
div.row:nth-child(9) input:focus + span,
div.row:nth-child(9) input:active + span {
padding: 3px 10px;
border-radius: 6px;
transform: translateY(-150%);
}
div.row:nth-child(9) input:focus + span:before,
div.row:nth-child(9) input:active + span:before {
opacity: 1;
}
div.row:nth-child(10) input {
border-width: 1px 0;
border-radius: 0;
}
div.row:nth-child(10) input + span {
background: transparent;
}
div.row:nth-child(10) input:focus,
div.row:nth-child(10) input:active {
border-width: 2px 0;
border-color: #000;
}
div.row:nth-child(10) input:focus + span,
div.row:nth-child(10) input:active + span {
background: transparent;
transform: translateY(-120%);
}
div.row:nth-child(11) input {
border-radius: 0;
border-width: 1px 0;
}
div.row:nth-child(11) input + span {
background: transparent;
}
div.row:nth-child(11) input:focus + span,
div.row:nth-child(11) input:active + span {
background: transparent;
border: 1px solid #fff;
border-radius: 0;
border-width: 0 0 0 1px;
animation: halfLeft .6s ease-in;
animation-fill-mode: forwards;
}
@keyframes halfLeft {
20% {
transform: translateX(-60%);
}
40% {
transform: translateX(-42%);
}
60% {
transform: translateX(-56%);
}
80% {
transform: translateX(-46%);
}
100% {
transform: translateX(-50%);
}
}
div.row:nth-child(12) input {
border-radius: 0;
border-width: 0;
background: transparent;
}
div.row:nth-child(12) input + span {
background: transparent;
}
div.row:nth-child(12) input + span:before {
content: "";
width: 160px;
height: 1px;
background-color: #fff;
position: absolute;
left: 0;
bottom: 0;
}
div.row:nth-child(12) input:focus + span,
div.row:nth-child(12) input:active + span {
background: transparent;
transform: translateY(-100%);
}
div.row:nth-child(13) input {
border-radius: 0;
border: 1px solid #fff;
border-top-color: rgba(255, 255, 255, 0);
border-right-color: rgba(255, 255, 255, 0);
border-bottom-color: white;
border-left-color: rgba(255, 255, 255, 0);
background: transparent;
}
div.row:nth-child(13) input + span {
background: transparent;
}
div.row:nth-child(13) input:focus,
div.row:nth-child(13) input:active {
transition: none;
animation: borderAnim 3s;
animation-fill-mode: forward;
border: 1px solid #fff;
}
div.row:nth-child(13) input:focus + span,
div.row:nth-child(13) input:active + span {
background: transparent;
transform: translateY(-100%);
}
@keyframes borderAnim {
25% {
border-top-color: rgba(255, 255, 255, 0);
border-right-color: white;
border-bottom-color: white;
border-left-color: rgba(255, 255, 255, 0);
}
50% {
border-top-color: white;
border-right-color: white;
border-bottom-color: white;
border-left-color: rgba(255, 255, 255, 0);
}
75% {
border-top-color: white;
border-right-color: white;
border-bottom-color: white;
border-left-color: white;
}
}
div.row:nth-child(14) input {
border-radius: 0;
border: 1px solid #fff;
transform-origin: left center;
color: #fff;
}
div.row:nth-child(14) input + span {
background: transparent;
}
div.row:nth-child(14) input:focus,
div.row:nth-child(14) input:active {
transform: scale(1.2);
box-shadow: 0px 0px 2px #000;
color: #fff;
border: 2px solid #fff;
}
div.row:nth-child(14) input:focus + span,
div.row:nth-child(14) input:active + span {
background: transparent;
transform: translateY(-100%) scale(0.8);
}
div.row:nth-child(15) input {
border-radius: 0;
border: 1px solid #fff;
background-color: #026873;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.17) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.19) 50%);
background-size: 13px, 29px, 37px, 53px;
animation: shadowGo 10s linear infinite;
animation-play-state: running;
}
div.row:nth-child(15) input + span {
background: transparent;
}
div.row:nth-child(15) input:focus,
div.row:nth-child(15) input:active {
background-color: #137884;
background-size: 13px, 29px, 37px, 53px;
animation-play-state: paused;
}
div.row:nth-child(15) input:focus + span,
div.row:nth-child(15) input:active + span {
transform: translateY(-100%) scale(0.8);
background: transparent;
color: #137884;
}
@keyframes shadowGo {
0% {
background-position: 0 0;
}
100% {
background-position: -600% 0%;
}
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div id='container'>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
<div class='row'>
<label>
<input type='text'>
<span>姓名</span>
</label>
<label>
<input type='text'>
<span>性别</span>
</label>
<label>
<input type='text'>
<span>邮箱</span>
</label>
</div>
</div>
</body>
</html>JS代码(prefixfree.min.js):
!function(){
function e(e,r){
return[].slice.call((r||document).querySelectorAll(e))}
if(window.addEventListener){
var r=window.StyleFix={
link:function(e){
try{
if("stylesheet"!==e.rel||e.hasAttribute("data-noprefix"))return}
catch(t){
return}
var n,i=e.href||e.getAttribute("data-href"),a=i.replace(/[^\/]+$/,""),o=(/^[a-z]{
3,10}
:/.exec(a)||[""])[0],s=(/^[a-z]{
3,10}
:\/\/[^\/]+/.exec(a)||[""])[0],l=/^([^?]*)\??/.exec(i)[1],u=e.parentNode,p=new XMLHttpRequest;
p.onreadystatechange=function(){
4===p.readyState&&n()}
,n=function(){
var t=p.responseText;
if(t&&e.parentNode&&(!p.status||p.status<400||p.status>600)){
if(t=r.fix(t,!0,e),a){
t=t.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,r,t){
return/^([a-z]{
3,10}
:|#)/i.test(t)?e:/^\/\//.test(t)?'url("'+o+t+'")':/^\//.test(t)?'url("'+s+t+'")':/^\?/.test(t)?'url("'+l+t+'")':'url("'+a+t+'")'}
);
var n=a.replace(/([\\\^\$*+[\]?{
}
.=!:(|)])/g,"\\$1");
t=t.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+n,"gi"),"$1")}
var i=document.createElement("style");
i.textContent=t,i.media=e.media,i.disabled=e.disabled,i.setAttribute("data-href",e.getAttribute("href")),u.insertBefore(i,e),u.removeChild(e),i.media=e.media}
}
;
try{
p.open("GET",i),p.send(null)}
catch(t){
"undefined"!=typeof XDomainRequest&&(p=new XDomainRequest,p.onerror=p.onprogress=function(){
}
,p.onload=n,p.open("GET",i),p.send(null))}
e.setAttribute("data-inprogress","")}
,styleElement:function(e){
if(!e.hasAttribute("data-noprefix")){
var t=e.disabled;
e.textContent=r.fix(e.textContent,!0,e),e.disabled=t}
}
,styleAttribute:function(e){
var t=e.getAttribute("style");
t=r.fix(t,!1,e),e.setAttribute("style",t)}
,process:function(){
e("style").forEach(StyleFix.styleElement),e("[style]").forEach(StyleFix.styleAttribute)}
,register:function(e,t){
(r.fixers=r.fixers||[]).splice(void 0===t?r.fixers.length:t,0,e)}
,fix:function(e,t,n){
for(var i=0;
i<r.fixers.length;
i++)e=r.fixers[i](e,t,n)||e;
return e}
,camelCase:function(e){
return e.replace(/-([a-z])/g,function(e,r){
return r.toUpperCase()}
).replace("-","")}
,deCamelCase:function(e){
return e.replace(/[A-Z]/g,function(e){
return"-"+e.toLowerCase()}
)}
}
;
!function(){
setTimeout(function(){
}
,10),document.addEventListener("DOMContentLoaded",StyleFix.process,!1)}
()}
}
(),function(e){
function r(e,r,n,i,a){
if(e=t[e],e.length){
var o=RegExp(r+"("+e.join("|")+")"+n,"gi");
a=a.replace(o,i)}
return a}
if(window.StyleFix&&window.getComputedStyle){
var t=window.PrefixFree={
prefixCSS:function(e,n){
var i=t.prefix;
if(t.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi,function(e,r,t,n){
return r+(t||"")+"linear-gradient("+(90-n)+"deg"}
)),e=r("functions","(\\s|:|,)","\\s*\\(","$1"+i+"$2(",e),e=r("keywords","(\\s|:)","(\\s|;
|\\}
|$)","$1"+i+"$2$3",e),e=r("properties","(^|\\{
|\\s|;
)","\\s*:","$1"+i+"$2:",e),t.properties.length){
var a=RegExp("\\b("+t.properties.join("|")+")(?!:)","gi");
e=r("valueProperties","\\b",":(.+?);
",function(e){
return e.replace(a,i+"$1")}
,e)}
return n&&(e=r("selectors","","\\b",t.prefixSelector,e),e=r("atrules","@","\\b","@"+i+"$1",e)),e=e.replace(RegExp("-"+i,"g"),"-"),e=e.replace(/-\*-(?=[a-z]+)/gi,t.prefix)}
,property:function(e){
return(t.properties.indexOf(e)?t.prefix:"")+e}
,value:function(e){
return e=r("functions","(^|\\s|,)","\\s*\\(","$1"+t.prefix+"$2(",e),e=r("keywords","(^|\\s)","(\\s|$)","$1"+t.prefix+"$2$3",e)}
,prefixSelector:function(e){
return e.replace(/^:{
1,2}
/,function(e){
return e+t.prefix}
)}
,prefixProperty:function(e,r){
var n=t.prefix+e;
return r?StyleFix.camelCase(n):n}
}
;
!function(){
var e={
}
,r=[],n=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,a=function(t){
if("-"===t.charAt(0)){
r.push(t);
var n=t.split("-"),i=n[1];
for(e[i]=++e[i]||1;
n.length>3;
){
n.pop();
var a=n.join("-");
o(a)&&-1===r.indexOf(a)&&r.push(a)}
}
}
,o=function(e){
return StyleFix.camelCase(e)in i}
;
if(n.length>0)for(var s=0;
s<n.length;
s++)a(n[s]);
else for(var l in n)a(StyleFix.deCamelCase(l));
var u={
uses:0}
;
for(var p in e){
var f=e[p];
u.uses<f&&(u={
prefix:p,uses:f}
)}
t.prefix="-"+u.prefix+"-",t.Prefix=StyleFix.camelCase(t.prefix),t.properties=[];
for(var s=0;
s<r.length;
s++){
var l=r[s];
if(0===l.indexOf(t.prefix)){
var c=l.slice(t.prefix.length);
o(c)||t.properties.push(c)}
}
"Ms"!=t.Prefix||"transform"in i||"MsTransform"in i||!("msTransform"in i)||t.properties.push("transform","transform-origin"),t.properties.sort()}
(),function(){
function e(e,r){
return i[r]="",i[r]=e,!!i[r]}
var r={
"linear-gradient":{
property:"backgroundImage",params:"red,teal"}
,calc:{
property:"width",params:"1px + 5%"}
,element:{
property:"backgroundImage",params:"#foo"}
,"cross-fade":{
property:"backgroundImage",params:"url(a.png),url(b.png),50%"}
}
;
r["repeating-linear-gradient"]=r["repeating-radial-gradient"]=r["radial-gradient"]=r["linear-gradient"];
var n={
initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","min-content":"width"}
;
t.functions=[],t.keywords=[];
var i=document.createElement("div").style;
for(var a in r){
var o=r[a],s=o.property,l=a+"("+o.params+")";
!e(l,s)&&e(t.prefix+l,s)&&t.functions.push(a)}
for(var u in n){
var s=n[u];
!e(u,s)&&e(t.prefix+u,s)&&t.keywords.push(u)}
}
(),function(){
function r(e){
return a.textContent=e+"{
}
",!!a.sheet.cssRules.length}
var n={
":read-only":null,":read-write":null,":any-link":null,"::selection":null}
,i={
keyframes:"name",viewport:null,document:'regexp(".")'}
;
t.selectors=[],t.atrules=[];
var a=e.appendChild(document.createElement("style"));
for(var o in n){
var s=o+(n[o]?"("+n[o]+")":"");
!r(s)&&r(t.prefixSelector(s))&&t.selectors.push(o)}
for(var l in i){
var s=l+" "+(i[l]||"");
!r("@"+s)&&r("@"+t.prefix+s)&&t.atrules.push(l)}
e.removeChild(a)}
(),t.valueProperties=["transition","transition-property"],e.className+=" "+t.prefix,StyleFix.register(t.prefixCSS)}
}
(document.documentElement);
分享到QQ
分享到微博
微信扫一扫
