css线条流动动画效果 |yii theme css

/*添加动画效果的CSS代码*/
.flow {
width: 100%;
height: 4px;
background-color: #fff;
position: relative;
overflow: hidden;
}
.flow:before {
content: "";
position: absolute;
width: 200%;
height: 100%;
background-color: #e74c3c;
top: 0;
left: -100%;
animation: flow 2s infinite linear;
}
@keyframes flow {
from {
left: -100%;
}
to {
left: 100%;
}
}

首先，大家需要创建一个容器，使用

div

标签，并给它添加一个类名为

.flow

。然后大家设置它的宽度为100%，高度为4像素，并且将背景色设置为白色。接下来，大家将这个容器的位置设为相对定位，以便大家在内部创建一个伪元素绝对定位。

在伪元素上设置了宽度为200%和高度为100%的属性，并将背景色设置为红色。大家还将其位置设为绝对定位，并在左侧外部，即将其移动到屏幕的左边。这种操作可以确保线条从一侧进入并在容器的另一侧消失。

接下来，大家添加动画效果。大家使用

@keyframes

创建一个名为

flow

的动画效果。在该效果中，大家从左侧外部开始并移动到右侧外部。大家还将该动画的持续时间设置为2秒，循环模式为无穷次，并使用线性动画函数使线条按照一个匀速移动。

现在，大家已经添加了线条从左到右流动的效果。如果您想要让线条从右到左流动，则需要将

.flow:before

中的左边距和从左到右经过的内容颠倒一下。然后您就可以将该效果嵌入到您的网站中，并使网站更加生动有趣。