表单标签动画畅想

作者：文竹a | 来源：互联网 | 2023-05-27 16:36

引言今天来看一组表单标签动画效果，希望可以对大家有所帮助，灵感来自于InspirationforTextInput和TextInputLove

引言

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

推荐阅读

ip
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
js
java 线程死锁模拟

1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ... [详细]

蜡笔小新 2023-12-13 19:12:25
web
ASP.NET2.0数据教程之十四：使用FormView的模板

本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观，与GridView和DetailsView不同，FormView使用模板来呈现，可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]

蜡笔小新 2023-12-13 08:07:00
ip
[echarts] 同指标对比柱状图相关的知识介绍及应用示例

本文由编程笔记小编为大家整理，主要介绍了echarts同指标对比柱状图相关的知识，包括对比课程通过率最高的8个课程和最低的8个课程以及全校的平均通过率。文章提供了一个应用示例，展示了如何使用echarts制作同指标对比柱状图，并对代码进行了详细解释和说明。该示例可以帮助读者更好地理解和应用echarts。 ... [详细]

蜡笔小新 2023-12-09 10:02:11
ip
引号快捷键_首选项和设置——自定义快捷键

3.3自定义快捷键（CustomizingHotkeys）ChemDraw快捷键由一个XML文件定义，我们可以根据自己的需要， ... [详细]

蜡笔小新 2023-10-17 19:10:46
js
pythonMatplotlib(二)

Matplotlib+pandas作图一、对csv文件进行提取ruixi.csv对上述表格进行提取并做图画出图像二、对.xlsx进行提取:rui ... [详细]

蜡笔小新 2023-10-17 15:51:22
js
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
utf-8
在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板

本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤，包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读，读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]

蜡笔小新 2023-12-12 17:52:50
datetime
【机器学习手册】日期和时区操作的重要性及应用

本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景，描述了学童们面对老先生的教导时的反应，以及上官如在这个过程中的表现。同时，文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后，文章强调了日期和时区操作在机器学习中的重要性，并指出了其在实际应用中的作用和意义。 ... [详细]

蜡笔小新 2023-12-12 17:40:14
ip
【Vue】表单 input 绑定

网址：https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令，在 ... [详细]

蜡笔小新 2023-12-11 18:07:28
js
使用n3-charts绘制以日期为x轴的数据

本文介绍了如何使用n3-charts绘制以日期为x轴的数据，并提供了相应的代码示例。通过设置x轴的类型为日期，可以实现对日期数据的正确显示和处理。同时，还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习，读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]

蜡笔小新 2023-12-10 00:19:21
sum
利用ARMA模型对平稳非白噪声序列进行建模的步骤及代码实现

本文介绍了利用ARMA模型对平稳非白噪声序列进行建模的步骤及代码实现。首先对观察值序列进行样本自相关系数和样本偏自相关系数的计算，然后根据这些系数的性质选择适当的ARMA模型进行拟合，并估计模型中的位置参数。接着进行模型的有效性检验，如果不通过则重新选择模型再拟合，如果通过则进行模型优化。最后利用拟合模型预测序列的未来走势。文章还介绍了绘制时序图、平稳性检验、白噪声检验、确定ARMA阶数和预测未来走势的代码实现。 ... [详细]

蜡笔小新 2023-12-09 08:30:08
ip
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
main
python 终止函数命令_如何使“停止”按钮终止已经在Tkinter（Python）中运行的“启动”函数...

我用Tkinter制作了一个图形用户界面，有两个主按钮：“开始”和“停止”。请您就如何使用“停止”按钮终止“开始”按钮为以下代码调用的已运行功能提供建议 ... [详细]

蜡笔小新 2023-10-17 20:02:38
main
属性字符串NSMutableAttributedString

要实现如下效果：NSString*mailStringmymail126.com;NSString*mailStringWithQuotes[NSStringst ... [详细]

蜡笔小新 2023-10-17 17:34:43

文竹a

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章