表单标签动画畅想

柔情只为你懂 2022-08-06 14:18 161阅读 0赞

### 引言 ###

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

### 搭建根基 ###

我们同样使用了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){}
    }

### 效果一 ###

![这里写图片描述][1422748872_2796.gif]

//设置每一行的动画效果
     //&: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%);
          }
        }
     }

### 效果二 ###

![这里写图片描述][1422748872_2446.gif]

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

### 效果三 ###

![这里写图片描述][1422748873_2904.gif]

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

### 效果四 ###

![这里写图片描述][1422748873_1810.gif]

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

### 效果五 ###

![这里写图片描述][1422748873_9285.gif]

//效果五，标签上旋
     &: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;
        }
      }
     }

### 效果六 ###

![这里写图片描述][1422748903_4380.gif]

//效果六，标签下旋
      &: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);
        }
      }

### 效果七 ###

![这里写图片描述][1422748903_3235.gif]

//效果七，标签左折
      &: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);
        }
      }
     }

### 效果八 ###

![这里写图片描述][1422748903_1670.gif]

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

### 效果九 ###

![这里写图片描述][1422748904_9334.gif]

//效果九，标签上移变提示框
     &: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;
          }
        }
      }
     }

### 效果十 ###

![这里写图片描述][1422748904_1858.gif]

//效果十，标签上移，框变色
     &: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%);
        }
      }
     }

### 效果十一 ###

![这里写图片描述][1422748932_6571.gif]

//效果十一，标签左弹性
    &: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%);
        }
      }
     }

### 效果十二 ###

![这里写图片描述][1422748932_6580.gif]

//效果十二，横线上移
     &: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%);
        }
      }
     }

### 效果十三 ###

![这里写图片描述][1422748933_7520.gif]

//效果十三，边框动画
     &: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);
       }
     }

### 效果十四 ###

![这里写图片描述][1422748933_2162.gif]

//效果十四，前后立体变化
     &: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);
        }
      }
     }

### 效果十五 ###

![这里写图片描述][1422748933_5261.gif]

//效果十五，背景条纹动画
     &: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][http_blog.csdn.net_whqet_article_details_43369821] ####

[Inspiration for Text Input]: http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/
[Text Input Love]: http://codepen.io/MichaelArestad/pen/ohLIa
[20150201144948310]: /images/20220806/143bb455eaee4c7eb124df18e1643e56.png
[Link 1]: http://codepen.io/whqet/pen/razEXR
[Link 2]: http://codepen.io/whqet/share/zip/razEXR/
[1422748872_2796.gif]: https://img-my.csdn.net/uploads/201502/01/1422748872_2796.gif
[1422748872_2446.gif]: https://img-my.csdn.net/uploads/201502/01/1422748872_2446.gif
[1422748873_2904.gif]: https://img-my.csdn.net/uploads/201502/01/1422748873_2904.gif
[1422748873_1810.gif]: https://img-my.csdn.net/uploads/201502/01/1422748873_1810.gif
[1422748873_9285.gif]: https://img-my.csdn.net/uploads/201502/01/1422748873_9285.gif
[1422748903_4380.gif]: https://img-my.csdn.net/uploads/201502/01/1422748903_4380.gif
[1422748903_3235.gif]: https://img-my.csdn.net/uploads/201502/01/1422748903_3235.gif
[1422748903_1670.gif]: https://img-my.csdn.net/uploads/201502/01/1422748903_1670.gif
[1422748904_9334.gif]: https://img-my.csdn.net/uploads/201502/01/1422748904_9334.gif
[1422748904_1858.gif]: https://img-my.csdn.net/uploads/201502/01/1422748904_1858.gif
[1422748932_6571.gif]: https://img-my.csdn.net/uploads/201502/01/1422748932_6571.gif
[1422748932_6580.gif]: https://img-my.csdn.net/uploads/201502/01/1422748932_6580.gif
[1422748933_7520.gif]: https://img-my.csdn.net/uploads/201502/01/1422748933_7520.gif
[1422748933_2162.gif]: https://img-my.csdn.net/uploads/201502/01/1422748933_2162.gif
[1422748933_5261.gif]: https://img-my.csdn.net/uploads/201502/01/1422748933_5261.gif
[http_blog.csdn.net_whqet_article_details_43369821]: http://blog.csdn.net/whqet/article/details/43369821