css3 运动的两条线 |button css 不会弹起

.line-1{
width: 0;
height: 2px;
background-color: #000;
position: absolute;
top: 10px;
left: 0;
animation: line-1 1s ease-out forwards;
}
@keyframes line-1{
0%{
width: 0;
}
100%{
width: 100%;
}
}
.line-2{
width: 0;
height: 2px;
background-color: #000;
position: absolute;
bottom: 10px;
right: 0;
animation: line-2 1s ease-out forwards;
}
@keyframes line-2{
0%{
width: 0;
}
100%{
width: 100%;
}
}

以上代码中，大家分别定义了两条线的CSS样式，分别对应着类名为line-1和line-2，都是利用绝对定位来精确控制位置。针对每一条线，大家都定义了一个名为line-1和line-2的关键帧，设置宽度从0到100%的变化，来实现线条从左往右的运动效果。

最后，大家给两条线都加上了animation属性，时间为1秒钟，运动方式为缓出动画，forwards表示动画结束后保持最终状态，让其看上去更加自然流畅。