表单标签动画畅想

引言

今天来看一组表单标签动画效果，希望可以对大家有所帮助，灵感来自于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

posted @ 2015-02-13 09:48 whqet 阅读(1537) 评论(12) 编辑收藏举报

刷新页面返回顶部

whqet前端开发

王海庆的博客，关注前端开发分享相关资源

表单标签动画畅想

引言

搭建根基

效果一

效果二

效果三

效果四

效果五

效果六

效果七

效果八

效果九

效果十

效果十一

效果十二

效果十三

效果十四

效果十五

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

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

公告

whqet前端开发

王海庆的博客，关注前端开发 分享相关资源

表单标签动画畅想

引言

搭建根基

效果一

效果二

效果三

效果四

效果五

效果六

效果七

效果八

效果九

效果十

效果十一

效果十二

效果十三

效果十四

效果十五

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

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

公告

王海庆的博客，关注前端开发分享相关资源