表单标签动画畅想

来源：互联网发布：linux 修改密码编辑：程序博客网时间：2024/04/25 15:30

引言

今天来看一组表单标签动画效果，希望可以对大家有所帮助，灵感来自于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:focus,  input:active{    transition:none;    animation:borderAnim 3s;    animation-fill-mode:forward;    border:1px solid #fff;    +span{      background:transparent;      transform:translateY(-100%);    }  } } @keyframes borderAnim{   25%{      border-top-color:rgba(255,255,255,0);      border-right-color:rgba(255,255,255,1);      border-bottom-color:rgba(255,255,255,1);      border-left-color:rgba(255,255,255,0);   }   50%{      border-top-color:rgba(255,255,255,1);      border-right-color:rgba(255,255,255,1);      border-bottom-color:rgba(255,255,255,1);      border-left-color:rgba(255,255,255,0);   }   75%{      border-top-color:rgba(255,255,255,1);      border-right-color:rgba(255,255,255,1);      border-bottom-color:rgba(255,255,255,1);      border-left-color:rgba(255,255,255,1);   } }

效果十四

这里写图片描述

 //效果十四，前后立体变化 &:nth-child(14){  input{    border-radius:0;    border:1px solid #fff;    transform-origin:left center;    color:#fff;    +span{      background: transparent;    }  }  input:focus,  input:active{    transform:scale(1.2);    box-shadow:0px 0px 2px #000;    color:#fff;    border:2px solid #fff;    +span{      background:transparent;      transform:translateY(-100%) scale(0.8);    }  } }

效果十五

这里写图片描述

 //效果十五，背景条纹动画 &:nth-child(15){  input{    border-radius:0;    border:1px solid #fff;    background-color: #026873;    background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);    background-size: 13px, 29px, 37px, 53px;    animation: shadowGo 10s linear infinite;     animation-play-state:running;    +span{      background: transparent;    }  }  input:focus,  input:active{    background-color: #137884;    background-size: 13px, 29px, 37px, 53px;    animation-play-state:paused;    +span{      transform:translateY(-100%) scale(0.8);      background:transparent;      color:#137884;    }  } }  @keyframes shadowGo{           0% {background-position: 0 0}          100% {background-position: -600% 0%}  };

十五种动画效果，希望可以对您有所帮助。如果你耐着性子读到这里，是我的莫大荣幸，感谢感谢。
欢迎评论，欢迎拍砖。

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。

本文原文链接，http://blog.csdn.net/whqet/article/details/43369821

29 1