基本的布局：

1.小盒子(美观效果)

2.h1标签(提示文字效果)

3.类名为input-item的div(美观效果)

4.input输入框

5.i标签(线条动画展示)

css样式：

*{

padding: 0;
margin: 0;
box-sizing: border-box;

}

html, body {

height: 100%;
width: 100%;

}

.box {

height: 400px;
width: 350px;
margin: auto;
background-color: #000;
margin-top: 10px;
padding-left: 15px;
padding-right: 15px;

}

h1 {

color: white;
text-align: center;
height: 50px;
width: 100%;
line-height: 50px;

}

.input-item {

position: relative;
width: 100%;
height: 55px;
line-height: 55px;

}

.input-item input {

width: 100%;
height: 100%;
/* 背景:全透明黑色rgba(0,0,0,0)*/
background: transparent;
color: #fff;
height: 40px;
padding-left: 20px;
border: 0;
font-size: 15px;
/* 当元素获得焦点的时候，焦点框为0 */
outline: none;

}

.input-item i {

position: absolute;
left: 0;
bottom: 5px;
width: 100%;
height: 2px;
/* 背景颜色 linear-gradient线性渐变呈现线性变化 */
background: linear-gradient( 90deg, #ff1b69, #ff0, #2196f3, #9c27b0, #ff1b69);
/* animate：是animate-name属性的值，也是下文@keyframes 动画的名称 */
/* 2s：是animation-duration属性的值，动画在2s内完成 */
/* linear：是animation-timing-function属性的值，规定从开始到结束的速度相同的动画； */
/* infinite：是animation-iteration-count属性的值，表示画永远持续下去 */
animation: animate 2s linear infinite;

}

@keyframes animate {

/* 动画属性 自定义动画名称 */
/* form  起始时,等同于0%
   to    终点时,等同于100% */
from {
    background-position-x: 0;
}
to {
    background-position-x: 300px;
}

}