引言
今天來看一組表單标簽動畫效果，希望可以對大家有所幫助，靈感來自于Inspiration for Text Input和Text Input Love，一并緻謝。
效果照例放在Codepen，雖少效果較慢，但值得期待。線上編輯，下載下傳收藏。
搭建根基
我們同樣使用了haml來簡化html書寫。
#container
-(..).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: %;
height:vw;
padding-left:vw;
counter-increment: counterA;
&:before{
content:counter(counterA);
color:rgba(,,,.);
font-size:vw;
position: absolute;
left:px;
}
label{
position: relative;
display: block;
float: left;
margin:vw vw;
input{
width:px;
height:px;
line-height:px;
background: rgba(,,,.);
border:none;
outline:none;
border:px solid #fff;
color: #377D6A;
padding:px px;
border-radius:px;
text-indent: px;
transition: all .s ease-in-out;
::-webkit-input-placeholder {
color: transparent;
}
+span{
position: absolute;
left:;
top:;
color:#fff;
background: #7AB893;
display: inline-block;
padding: px px;
transform-origin:left center;
transform: perspective(px);
transition: all .s ease-in-out;
border-radius:px px;
}
}
input:focus,
input:active {
text-indent: ;
background: rgba(,,,.);
::-webkit-input-placeholder {
color: #f00;
}
+span{
background: darken(#7AB893,%);
}
}
}
/*設定背景色，随機顔色*/
@for $i from 1 through 15{
&:nth-child(#{$i}){
background:hsl(random(),%,%);
}
}
//設定每一行的動畫效果
//&:nth-child(1){}
}
效果一
//設定每一行的動畫效果
//&:nth-child(1){}
//效果一，标簽左移
&:nth-child(1){
input:focus,
input:active{
border-radius: px px ;
+span{
border-radius:px px;
transform: translateX(-%);
}
}
}
效果二
//效果二，标簽右移
&:nth-child(2){
input:focus,
input:active{
+span{
border-radius: px px ;
transform: translateX(%);
}
}
}
效果三
//效果三，标簽上移
&:nth-child(3){
input:focus,
input:active{
text-indent: px;
+span{
background-color: transparent;
transform: translateY(-%);
}
}
}
效果四
//效果四，标簽下移
&:nth-child(4){
input:focus,
input:active{
text-indent: px;
+span{
background-color: transparent;
transform: translateY(%);
}
}
}
效果五
//效果五，标簽上旋
&:nth-child(5){
input+span{
transform-origin:left bottom;
}
input:focus,
input:active{
border-radius: px px ;
text-indent: px;
+span{
transform: rotate(-deg);
border-radius: px px ;
}
}
}
效果六
//效果六，标簽下旋
&:nth-child(6){
input+span{
transform-origin:left bottom;
}
input:focus,
input:active{
border-radius: px px ;
+span{
animation:swing s;
animation-fill-mode: forwards;
border-radius: px px ;
}
}
}
//第6個動畫
@keyframes swing{
0% {
transform: rotate();
}
20% {
transform: rotate(deg);
}
40% {
transform: rotate(deg);
}
60% {
transform: rotate(deg);
}
80% {
transform: rotate(deg);
}
100% {
transform: rotate(deg);
}
}
效果七
//效果七，标簽左折
&:nth-child(7){
input+span{
transform-origin:right center;
}
input:focus,
input:active{
border-radius: px px ;
+span{
transform:perspective(px) translateX(-%) rotateY(deg);
}
}
}
效果八
//效果八，标簽左翻
&:nth-child(8){
input:focus,
input:active{
border-radius: px px ;
+span{
transform: rotateY(deg);
border-radius: px px ;
}
}
}
效果九
//效果九，标簽上移變提示框
&:nth-child(9){
input{
+span{
background: transparent;
&:before{
content:"";
width:;
height:;
position: absolute;
left:px;
bottom:-px;
border:px solid #000;
border-color:darken(#7AB893,%) transparent transparent transparent;
transition:all .s;
opacity: ;
}
}
}
input:focus,
input:active{
+span{
padding:px px;
border-radius:px;
transform:translateY(-%);
&:before{
opacity: ;
}
}
}
}
效果十
//效果十，标簽上移，框變色
&:nth-child(10){
input{
border-width:px ;
border-radius:;
+span{
background: transparent;
}
}
input:focus,
input:active{
border-width:px ;
border-color:#000;
+span{
background:transparent;
transform:translateY(-%);
}
}
}
效果十一
//效果十一，标簽左彈性
&:nth-child(11){
input{
border-radius:;
border-width:px ;
+span{
background: transparent;
}
}
input:focus,
input:active{
+span{
background:transparent;
border:px solid #fff;
border-radius:;
border-width: px;
animation:halfLeft .s ease-in;
animation-fill-mode: forwards;
}
}
@keyframes halfLeft{
20%{
transform:translateX(-%);
}
40%{
transform:translateX(-%);
}
60%{
transform:translateX(-%);
}
80%{
transform:translateX(-%);
}
100%{
transform:translateX(-%);
}
}
}
效果十二
//效果十二，橫線上移
&:nth-child(12){
input{
border-radius:;
border-width:;
background:transparent;
+span{
background: transparent;
&:before{
content:"";
width:px;
height:px;
background-color: #fff;
position: absolute;
left:;
bottom:;
}
}
}
input:focus,
input:active{
+span{
background:transparent;
transform:translateY(-%);
}
}
}
效果十三
//效果十三，邊框動畫
&:nth-child(13){
input{
border-radius:;
border:px solid #fff;
border-top-color:rgba(,,,);
border-right-color:rgba(,,,);
border-bottom-color:rgba(,,,);
border-left-color:rgba(,,,);
background:transparent;
+span{
background: transparent;
}
}
input:focus,
input:active{
transition:none;
animation:borderAnim s;
animation-fill-mode:forward;
border:px solid #fff;
+span{
background:transparent;
transform:translateY(-%);
}
}
}
@keyframes borderAnim{
25%{
border-top-color:rgba(,,,);
border-right-color:rgba(,,,);
border-bottom-color:rgba(,,,);
border-left-color:rgba(,,,);
}
50%{
border-top-color:rgba(,,,);
border-right-color:rgba(,,,);
border-bottom-color:rgba(,,,);
border-left-color:rgba(,,,);
}
75%{
border-top-color:rgba(,,,);
border-right-color:rgba(,,,);
border-bottom-color:rgba(,,,);
border-left-color:rgba(,,,);
}
}
效果十四
//效果十四，前後立體變化
&:nth-child(14){
input{
border-radius:;
border:px solid #fff;
transform-origin:left center;
color:#fff;
+span{
background: transparent;
}
}
input:focus,
input:active{
transform:scale();
box-shadow:px px px #000;
color:#fff;
border:px solid #fff;
+span{
background:transparent;
transform:translateY(-%) scale();
}
}
}
效果十五
//效果十五，背景條紋動畫
&:nth-child(15){
input{
border-radius:;
border:px solid #fff;
background-color: #026873;
background-image: linear-gradient(deg, rgba(,,,.) %, transparent %),
linear-gradient(deg, rgba(,,,.) %, transparent %),
linear-gradient(deg, transparent %, rgba(,,,.) %),
linear-gradient(deg, transparent %, rgba(,,,.) %);
background-size: px, px, px, px;
animation: shadowGo s linear infinite;
animation-play-state:running;
+span{
background: transparent;
}
}
input:focus,
input:active{
background-color: #137884;
background-size: px, px, px, px;
animation-play-state:paused;
+span{
transform:translateY(-%) scale();
background:transparent;
color:#137884;
}
}
}
@keyframes shadowGo{
0% {background-position: }
% {background-position: -% %}
};
十五種動畫效果，希望可以對您有所幫助。如果你耐着性子讀到這裡，是我的莫大榮幸，感謝感謝。
歡迎評論，歡迎拍磚。