表单标签动画（CSS）

最新推荐文章于 2024-04-29 17:39:24 发布
最新推荐文章于 2024-04-29 17:39:24 发布
阅读量673 收藏 4
点赞数 1
分类专栏： 页面相关

搭建根基

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

十五种动画效果，希望可以对您有所帮助

sunqian_happy
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css知识点总结1
Yydsaoligei的博客
08-23 2561
css相关知识点 引入css样式的三种方式 选择器之基本选择器 选择器之组合选择器 选择器之属性选择器 css选择器之分组于嵌套 伪类选择器 伪元素选择器 css选择器优先级 css字体样式 css背景属性 css边框属性 css的display隐藏属性
CSS 实现input自定义样式--文本框
且听风吟的博客
03-04 4470
CSS 实现input自定义样式--文本框
CSS中的表单
liu0218的博客
08-04 1870
作用：将用户填写的信息发送给服务器，例如账号注册、个人资料修改等等。表单控件等等
【Css】input输入文本框的样式大全和搜索框实例（图文和完整源码）
热门推荐
【敦厚的曹操】的专栏
04-01 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
超赞！只需几步，打造高颜值的CSS表单！（附代码）
最新发布
u013179804的博客
04-29 1152
今天，我们来用 CSS 美化一下表单元素，它几乎可使用绝大多数 CSS 属性进行样式设计。OK，那来一起看看吧。
表单和表格
m0_72958052的博客
08-25 214
tr:代表着行 td:设置单元格：th:单元格表头caption:标题cellspacing:设置边框合并cellpadding:设置内容离边框的距离单元格里面内容居中：水平方向：text-align:left/center/right;垂直方向： vertical-align:top/middle/bottomrowspan:合并纵向单元格colspan:合并行向单元格：合并单元格时注意点：合并时多余要删掉；表格的结构标签会改变内容位置；书写位置无关、thead：代表表格前面。...
常用css随记(input输入框/设置超出省略号隐藏/宽度向内自适应/滚动条组成/页面隐藏三种方式区别)
weixin_43743804的博客
05-08 3469
input输入框/设置超出省略号隐藏/宽度向内自适应/滚动条组成
js+css3登录表单动画特效
06-24
在本文中，我们将深入探讨如何使用JavaScript（JS）和CSS3来创建一个具有动画特效的登录表单。这种登录表单不仅提供了基本的输入验证功能，如邮箱和密码的检查，还通过动态视觉效果增强了用户体验。 首先，让我们从...
CSS3文本框动画输入标签效果.zip
07-05
"CSS3文本框动画输入标签效果"是一个巧妙地结合了jQuery和CSS3技术的特效，旨在提升用户在填写表单时的视觉体验和互动感受。这个特效的核心在于，它能够以动画的形式动态显示和隐藏输入框的标签，为原本静态的表单...
CSS3警告发光动画按钮.zip
05-14
例如，可以使用`<button>`或`<a>`标签，并通过`class`属性引用预定义的CSS类。 总结来说，这个“CSS3警告发光动画按钮”项目涵盖了以下CSS3知识点： 1. @keyframes关键帧动画 2. :hover伪类选择器 3. transition...
CSS样式表单美化系列
04-29
8. **动画效果**：通过CSS动画，可以在用户与表单交互时增加动态反馈，如输入验证成功时的背景色变化，或者提交按钮的过渡效果。 9. **表单验证**：除了前端样式，CSS也可以配合JavaScript进行简单的表单验证，通过...
CSS——表格和表单
jiuyue_77的博客
08-07 625
掌握表格和表单相关的标签。
CSS-表格表单_BFC
2301_80864686的博客
11-04 1419
（1）盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止margin重叠）（3）overflow的值不为visible—单纯的div不是BFC，如果添加了overflow：hidden等就是BFC。（2）float的值不为none—单纯的div不是BFC，如果添加了浮动就是BFC。（3）计算 BFC 的高度时，浮动元素也参与计算（应用：清除内部浮动）（2）BFC的区域不会与浮动的盒子发生重叠（应用：自适应两栏布局）（2）调整单元格与单元格之间的间距。
CSS3表格和表单样式
码说芯语的博客
10-31 4499
表格和表单样式
051 ＜css语法＞ 学习之: 常用标签(input等)
WLB 的博客
09-09 4519
标签 输入 input 一个样例 <form action="/demo/demo_form.asp"> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><b
css设置表单背景颜色为透明色
CSDN_XHC的博客
05-17 4573
1. 用background-color的值rgba(R, G, B, A)来设置。 2. R、G、B分别代表红绿蓝三种颜色。 3. A代表透明度，取值为0~1，值越小透明度越高。 4. background-color: rgba(0, 0, 0, 0.1);
给input设置css样式,input能改变css样式吗
weixin_35720882的博客
08-03 3676
input能改变css样式，其修改css样式的方法：1、利用伪类元素改变radio样式；2、利用label指向input，并通过改变label样式来达到效果即可。本教程操作环境：Dell G3电脑、Windows7系统、HTML5&&CSS3版本。推荐：《css视频教程》改变input框默认css样式的方法：一：利用伪类元素改变radio样式 (此方法无需添加额外的标签，更便捷)....
html设置表单透明度,css利用transparent属性设置透明度的方法
weixin_29409045的博客
06-28 4859
css利用transparent属性设置透明度的方法发布时间：2020-09-14 13:44:46来源：亿速云阅读：188作者：小新这篇文章主要介绍css利用transparent属性设置透明度的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！其实，css transparent是一种全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值；是用来...
CSS之表单的样式
晨识草的博客
07-16 3737
简单的表单样式此处用到了input、select，主要的类型有text、submit、date index.html<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"/> <meta charset="utf-8"> <title>Form CSS</title> <

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值