其实我觉得，想实现这种效果，代码量其实都不大，最重要的东西就是思路，首先，展示一下，这个东西的效果，下面在给大家讲讲我的思路吧！
代码展示！！！（直接化身CV工程师！！！）下面也有大致的讲解
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;justify-content:center;align-items:center;min-height:100vh;flex-direction:column;gap:30px;background:#222;}.inputBox{position:relative;width:250px;}.inputBoxinput{width:100%;padding:10px05px;background:transparent;outline:none;box-shadow:none;border:none;color:#fff;font-size:1em;letter-spacing:0.1em;transition:0.5s;}.inputBoxspan{position:absolute;left:0;padding:10px05px;pointer-events:none;font-size:1em;color:rgba(255,255,255,0.5);text-transform:uppercase;/*定义无小写字母，仅有大写字母*/letter-spacing:0.1em;/*是增加（值为正）或减少（值为负）字符间距*/transition:0.5s;}.inputBoxinput:valid~span,/*表单元素的值需要根据指定条件验证时设置指定样式*/.inputBoxinput:focus~span/*选择具有焦点的时候*/{color:#b0a4e3;transform:translateY(-16px);/*将文字向Y轴（向上）平移16px*/font-size:0.65em;}.inputBoxi/*可见的一个线*/{position:absolute;left:0;bottom:0;width:100%;height:2px;background:#fff;overflow:hidden;}.inputBoxi::before/*在i标签的左边创建（伪元素）一个跟i等大的一条线，加上炫彩颜色*/{content:'';position:absolute;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,#EEBD89,#D13ABD,#C973FF,#6CC6CB,#9FA5D5,#EAD6EE);animation:runing1slinearinfinite;transition:0.5s;}.inputBoxinput:valid~i::before,.inputBoxinput:focus~i::before{left:0;}/*创建动画*/@keyframesruning{0%{background-position-x:0;}100%{background-position-x:250px;}}</style></head><body><divclass="inputBox"><inputtype="text"required="required"><span>FirstName</span><i></i></div><divclass="inputBox"><inputtype="text"required="required"><span>LastName</span><i></i></div></body></html>首先，我们看到这种效果就应该想到C3的动画效果，然后心里应该有一个大概的框架，就是这样
左边是一条渐变的线，当input框有焦点的时候，跑到白色线那里，中间使用一个动画效果。
那么废话不多说了，上HTML代码！
<divclass="inputBox"><inputtype="text"required="required"><span>FirstName</span><i></i></div><divclass="inputBox"><inputtype="text"required="required"><span>LastName</span><i></i></div>下面给body，input框和里面的文字加上样式
body{display:flex;justify-content:center;align-items:center;min-height:100vh;flex-direction:column;gap:30px;background:#222;}.inputBox{position:relative;width:250px;}.inputBoxinput{width:100%;padding:10px05px;background:transparent;outline:none;box-shadow:none;border:none;color:#fff;font-size:1em;letter-spacing:0.1em;transition:0.5s;}.inputBoxspan{position:absolute;left:0;padding:10px05px;pointer-events:none;font-size:1em;color:rgba(255,255,255,0.5);text-transform:uppercase;/*定义无小写字母，仅有大写字母*/letter-spacing:0.1em;/*是增加（值为正）或减少（值为负）字符间距*/transition:0.5s;}实现文字向上方移动的效果，思想：向上移动然后文字变小
.inputBoxinput:valid~span,/*表单元素的值需要根据指定条件验证时设置指定样式*/.inputBoxinput:focus~span/*选择具有焦点的时候*/{color:#b0a4e3;transform:translateY(-16px);/*将文字向Y轴（向上）平移16px*/font-size:0.65em;}给i标签加上样式，然后给i标签里面加一个伪元素并加上样式，再加上动画，实现丝滑的效果
.inputBoxi/*可见的一个线*/{position:absolute;left:0;bottom:0;width:100%;height:2px;background:#fff;overflow:hidden;}.inputBoxi::before/*在i标签的左边创建（伪元素）一个跟i等大的一条线，加上炫彩颜色*/{content:'';position:absolute;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,#EEBD89,#D13ABD,#C973FF,#6CC6CB,#9FA5D5,#EAD6EE);animation:runing1slinearinfinite;transition:0.5s;}.inputBoxinput:valid~i::before,.inputBoxinput:focus~i::before{left:0;}/*创建动画*/@keyframesruning{0%{background-position-x:0;}100%{background-position-x:250px;}}
访客