css3 线动画 |css控制相对位置

.line{
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: black;
animation: line 2s infinite;
}
@keyframes line{
from{left: 0;}
to{left: 100%}
}

上面的代码是一个简单的CSS3线动画实现，它首先定义了一个 .line 的样式，使用绝对定位将其垂直居中在页面中，并设置其背景颜色为黑色，高度为1px。接着通过 animation 属性设置了名为 line 的动画，持续时间为 2s，无限循环。

而 @keyframes 中定义了动画从左侧开始（起点为 left:0），到达右侧（终点为 left:100%）的过程，同时运用了 from 和 to 关键字来定义起点和终点的样式。

通过调整 @keyframes 中不同的样式，大家可以实现更多的酷炫线动画效果，例如渐变、闪烁等。

总之，CSS3线动画是通过CSS3技术创建出的一种优雅、简单、美观并具有交互性的线性动画效果，可以为网站增添很多视觉上的吸引力，提高用户的使用体验。