表单标签动画畅想

引言

今天来看一组表单标签动画效果，希望可以对大家有所帮助，灵感来自于Inspiration for Text Input和Text Input Love，一并致谢。效果照例放在Codepen，虽少效果较慢，但值得期待。在线编辑，下载收藏。

搭建根基

我们同样使用了haml来简化html书写。

#container  -(1..15).each do    %div.row      %label        %input{:type=>"text"}        %span姓名      %label        %input{:type=>"text"}        %span性别      %label        %input{:type=>"text"}        %span邮箱

CSS部分我们使用了scss，首先我们来搭建页面布局和基础设置。

/* 重置*/*, *:before, *:after { box-sizing: border-box; } /*容器设置*/#container{  counter-reset: counterA;}/*布局实现*/div.row{  position: relative;  width: 100%;  height:20vw;  padding-left:15vw;  counter-increment: counterA;  &:before{    content:counter(counterA);    color:rgba(255,255,255,.05);    font-size:10vw;    position: absolute;    left:0px;  }  label{    position: relative;    display: block;    float: left;    margin:8vw 2vw;    input{      width:160px;      height:30px;      line-height:30px;      background: rgba(255,255,255,.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;            ::-webkit-input-placeholder {        color: transparent;      }      +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;      }    }    input:focus,    input:active {      text-indent: 0;      background: rgba(255,255,255,.2);      ::-webkit-input-placeholder {        color: #f00;      }      +span{        background: darken(#7AB893,20%);      }    }  }  /*设置背景色，随机颜色*/  @for $i from 1 through 15{    &:nth-child(#{$i}){      background:hsl(random(360),60%,30%);    }  } //设置每一行的动画效果 //&:nth-child(1){}}

效果一

 //设置每一行的动画效果 //&:nth-child(1){} //效果一，标签左移 &:nth-child(1){    input:focus,    input:active{      border-radius:0 4px 4px 0;      +span{        border-radius:4px 0 0 4px;        transform: translateX(-100%);      }    } }

效果二

 //效果二，标签右移 &:nth-child(2){    input:focus,    input:active{      +span{        border-radius:0 4px 4px 0;        transform: translateX(300%);      }    } }

效果三

 //效果三，标签上移  &:nth-child(3){    input:focus,    input:active{      text-indent: 0px;      +span{        background-color: transparent;        transform: translateY(-100%);      }    }  }

效果四

 //效果四，标签下移 &:nth-child(4){    input:focus,    input:active{      text-indent: 0px;      +span{        background-color: transparent;        transform: translateY(100%);      }    }  }

效果五

 //效果五，标签上旋 &:nth-child(5){   input+span{       transform-origin:left bottom;   }  input:focus,  input:active{    border-radius:0 4px 4px 0;    text-indent: 20px;    +span{      transform: rotate(-60deg);      border-radius:0 4px 4px 0;    }  } }

效果六

 //效果六，标签下旋  &:nth-child(6){   input+span{     transform-origin:left bottom;   }  input:focus,  input:active{    border-radius:0 4px 4px 0;    +span{           animation:swing 1s;      animation-fill-mode: forwards;      border-radius:0 4px 4px 0;    }  } }  //第6个动画  @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);    }  }

效果七

 //效果七，标签左折  &:nth-child(7){  input+span{     transform-origin:right center;   }  input:focus,  input:active{     border-radius:0 4px 4px 0;    +span{           transform:perspective(300px) translateX(-100%) rotateY(60deg);    }  } }

效果八

 //效果八，标签左翻  &:nth-child(8){  input:focus,  input:active{    border-radius:0 4px 4px 0;    +span{      transform: rotateY(180deg);      border-radius:0 4px 4px 0;    }  } }

效果九

 //效果九，标签上移变提示框 &:nth-child(9){  input{    +span{      background: transparent;      &:before{        content:"";        width:0;        height:0;        position: absolute;        left:20px;        bottom:-10px;        border:5px solid #000;        border-color:darken(#7AB893,20%) transparent transparent transparent;        transition:all .3s;        opacity: 0;      }    }  }  input:focus,  input:active{    +span{      padding:3px 10px;      border-radius:6px;      transform:translateY(-150%);      &:before{        opacity: 1;      }    }  } }

效果十

 //效果十，标签上移，框变色 &:nth-child(10){  input{    border-width:1px 0;    border-radius:0;    +span{      background: transparent;    }  }  input:focus,  input:active{    border-width:2px 0;    border-color:#000;    +span{      background:transparent;      transform:translateY(-120%);    }  } }

效果十一

 //效果十一，标签左弹性&:nth-child(11){  input{    border-radius:0;    border-width:1px 0;    +span{      background: transparent;    }  }  input:focus,  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%);    }  } }

效果十二

 //效果十二，横线上移 &:nth-child(12){  input{    border-radius:0;    border-width:0;    background:transparent;    +span{      background: transparent;      &:before{        content:"";        width:160px;        height:1px;        background-color: #fff;        position: absolute;        left:0;        bottom:0;      }    }  }  input:focus,  input:active{    +span{      background:transparent;      transform:translateY(-100%);    }  } }

效果十三

 //效果十三，边框动画 &: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:rgba(255,255,255,1);    border-left-color:rgba(255,255,255,0);    background:transparent;    +span{      background: transparent;    }  }  input: