Html CSS表单下划线文本字段动画效果
我有我的表单部分的以下代码（下图），在其中我希望这个（下图）下划线动画在文本输入字段中完成。每当用户将注意力集中在该字段上时，将显示要完成的动画。 动画要平滑、轻松 但我在里面找不到什么东西。有什么问题，如何解决？ 有人请帮忙吗Html CSS表单下划线文本字段动画效果,html,css,forms,Html,Css,Forms,我有我的表单部分的以下代码（下图），在其中我希望这个（下图）下划线动画在文本输入字段中完成。每当用户将注意力集中在该字段上时，将显示要完成的动画。 动画要平滑、轻松 但我在里面找不到什么东西。有什么问题，如何解决？ 有人请帮忙吗 html{ -moz osx字体平滑：灰度； -webkit字体平滑：抗锯齿； 文本呈现：优化易读性； } html，正文{ 身高：100%； } #接触{ 字体系列：“蒙特塞拉特”，无衬线； 字体大小：14px； 字体大小：300； 字母间距：3px； 显示：-网
html{
-moz osx字体平滑：灰度；
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
}
html，正文{
身高：100%；
}
#接触{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：14px；
字体大小：300；
字母间距：3px；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms flex流：行换行；
柔性流：行换行；
利润率：10%0；
}
#联系主体，主体页脚{
宽度：100%；
}
#联络线{
身高：100%；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
}
.form.text输入、.form.textarea、.form.label、.form.button{
填充物：1em 1.5em；
-webkit外观：无；
-moz外观：无；
外观：无；
大纲：无；
线高：正常；
边框：1px实心透明；
边界半径：0；
}
.form.text输入，.form.textarea{
字体：继承；
线高：正常；
宽度：100%；
框大小：边框框；
显示：块；
左侧填充：0；
边框底色：#00d2ff；
背景：透明；
大纲：无；
颜色：黑色；
}
.form.text输入：占位符，.form.text区域：占位符{
颜色：rgba（0,0,0,0.7）；
}
.form.text输入：-webkit自动填充，.form.textarea:-webkit自动填充{
盒影：0 0像素1000像素白色镶嵌；
边框顶色：白色；
左边框颜色：白色；
右边框颜色：白色；
}
.form.error.text-input、.form.error.textarea、.error.form.text-input、.form.error.text-input、.error.form.textarea、.form.error.textarea、{
边框颜色：透明红色透明；
}
.form:not（.has floated label）。文本输入：active，.form:not（.has floated label）。文本区域：active，.form:not（.has floated label）。文本输入：focus，.form:not（.has floated label）。文本区域：focus{
边框颜色：透明黑色透明；
}
.表格.标签{
位置：绝对位置；
z指数：10；
指针事件：无；
左侧填充：0；
}
.表格.标签{
排名：0；
左：0；
颜色：rgba（0,0,0,0.3）；
-webkit转换：颜色0.3s；
过渡：颜色0.3s；
}
.active.form.label、.form.active.label{
字号：0.80em；
线高：1；
字号：600；
文本转换：大写；
填充：0；
颜色：rgba（0,0,0,0.7）；
背景：白色；
}
.focus.form.label、.form.focus.label{
颜色：黑色；
}
.form.has-floated-label.字段：后{
内容：“；
位置：绝对位置；
底部：0；
左：0；
宽度：0%；
边框底部：3px实心#00d2ff；
-webkit过渡：宽度为0.3s立方贝塞尔（0.455,0.03,0.515,0.955）；
过渡：宽度为0.3s的三次贝塞尔（0.455,0.03,0.515,0.955）；
}
.form.has-floated-label.field.focus:after{
宽度：100%；
}
.表格.按钮{
字体：继承；
线高：正常；
光标：指针；
背景色：#00d2ff；
颜色：白色；
文本转换：大写；
文本对齐：居中；
字母间距：0.14286em；
过渡时间：0.4s；
}
.form.button:悬停，.form.button:焦点，.form.button:活动{
盒影：0 10px 15px rgba（0,0,0,1）；
}
.窗体.按钮：活动{
位置：相对位置；
顶部：1px；
左：1px；
}
.表格{
/*最大宽度：50em*/
宽度：100%；
利润率：0.10%；
/*填料：1米2米*/
框大小：边框框；
溢出：隐藏；
}
.表格.字段{
位置：相对位置；
宽度：100%；
边缘底部：1.5em；
浮动：左；
}
@媒体屏幕和屏幕（最小宽度：40em）{
.表格.字段.一半{
宽度：钙（50%-2米）；
右边距：2米；
}
.form.field.half+.half{
左边距：2米；
右边距：0；
}
}
.form.field：最后一个孩子{
浮动：对；
宽度：自动；
}
.form.textarea{
最大宽度：100%；
}
名称
电子邮件
消息
hr{
position:relative;
left:0;
width:0%;
height:2px;
background-color:#1784E1;
border:none;
margin-top:0;
margin-left:0;
margin-bottom:20px;
transition:0.5s;
}
input:focus + hr{
width:100%;
}
。输入名称{
位置：相对位置；
显示：内联块；
溢出：隐藏；
}
.输入名称>输入[类型=文本]{
边界：无；
底部边框：2倍纯红；
大纲：无；
}
.下划线动画{
过渡：均为0.5s；
显示：内联块；
底部：0；
左-100%；
位置：绝对位置；
宽度：100%；
高度：2倍；
背景色：#64e4fe；
}
.input name>input[type=text]：焦点+下划线动画{
左：0；
}