這回項(xiàng)目要做一個(gè)大屏展示，大概樣式是，中間一個(gè)地球，向外發(fā)射幾條藍(lán)色直線，直線另一頭是展示的標(biāo)題。為了體現(xiàn)科技感，藍(lán)色直線要做出一種像水流一樣的流動(dòng)特效。
白光向上流動(dòng)。文章來源：http://www.zghlxwxcb.cn/news/detail-624025.html
下面上代碼。文章來源地址http://www.zghlxwxcb.cn/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); // 線的旋轉(zhuǎn)角度
}
// 用來做流動(dòng)效果的
.line-left::before {
content: "";
position: absolute;
height: 4px; // 流體的寬度，可以適當(dāng)寬一些，但是注意位置偏移
width: 40px; // 流體路線長度，最好與線保持一致
background: linear-gradient(to left, transparent, #fff); // 流體樣式，這里是漸變
animation: fade-left 3s linear infinite; //使用fade-left動(dòng)畫
box-shadow: 0px 0px 17px 5px #72dffa; // 外發(fā)光
}
// 向左流動(dòng)，right改left為向右流動(dòng)
@keyframes fade-left {
0% {
right: 0px;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
right: calc(100% - 40px); // 到達(dá)終點(diǎn)時(shí)位置要減去自身的長度
opacity: 0;
}
}
到了這里，關(guān)于使用CSS制作流動(dòng)線效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
