フォームラベルアニメーションの想像力_html/css_WEB-ITnose

はじめに

今日は、

フォームラベルアニメーションエフェクト

のセットを見てみましょう。このインスピレーションは、「テキスト入力のインスピレーション」と「テキスト入力愛」から来ています。 エフェクトはいつものように
Codepen
に配置されますが、エフェクトは少なく、遅くなりますが、期待する価値があります。オンラインで編集し、ダウンロードして収集します。 基礎の構築

HTMLの記述を簡素化するためにhamlも使用します。

#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){}}

エフェクト 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%);      }    } }

エフェクト 2

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

エフェクト 3

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

エフェクト 4

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

エフェクト 5

rree

エフェクト 6

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

エフェクト 7

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

エフェクト8

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

エフェクト9

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

エフェクト10

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

エフェクト11

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

エフェクト12

rree

エフェクト サーティーン

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

15 のエフェクト

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

15 のアニメーションエフェクト、お役に立てば幸いです。辛抱強くこれを読んでいただければ、大変光栄です、ありがとうございます。

コメントやレンガは大歓迎です。

フロントエンド開発の仕事、フロントエンド開発に注意を払い、関連リソースを共有します。 CSDN 専門家ブログ、Wang Haiqing がお役に立てば幸いです。

この記事への元のリンク、