这回项目要做一个大屏展示，大概样式是，中间一个地球，向外发射几条蓝色直线，直线另一头是展示的标题。为了体现科技感，蓝色直线要做出一种像水流一样的流动特效。
白光向上流动。文章来源：https://www.toymoban.com/news/detail-624025.html
下面上代码。文章来源地址https://www.toymoban.com/news/detail-624025.html
<div class="line line-left line1"></div>
.line {
background: #01dde8; // 线的颜色
height: 4px; // 线的宽度
position: absolute;
transform-origin: left top;
z-index: 10;
width: 20px; // 线的长度
top: 50px; // 位置上偏移
left: 50px; // 位置左偏移
transform: rotateZ(35deg); // 线的旋转角度
}
// 用来做流动效果的
.line-left::before {
content: "";
position: absolute;
height: 4px; // 流体的宽度，可以适当宽一些，但是注意位置偏移
width: 40px; // 流体路线长度，最好与线保持一致
background: linear-gradient(to left, transparent, #fff); // 流体样式，这里是渐变
animation: fade-left 3s linear infinite; //使用fade-left动画
box-shadow: 0px 0px 17px 5px #72dffa; // 外发光
}
// 向左流动，right改left为向右流动
@keyframes fade-left {
0% {
right: 0px;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
right: calc(100% - 40px); // 到达终点时位置要减去自身的长度
opacity: 0;
}
}
到了这里，关于使用CSS制作流动线效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
