CSS3是一項(xiàng)非常強(qiáng)大的技術(shù)，它可以讓開發(fā)者們輕松地創(chuàng)建各種美妙的效果。其中之一就是線條波動(dòng)效果。通過CSS3，您可以輕松地創(chuàng)建出一個(gè)具有動(dòng)態(tài)波浪效果的線條。

.wave {
position: relative;
height: 50px;
width: 200px;
margin: 0 auto;
background-color: #fff;
overflow: hidden;
}
/* 創(chuàng)建波浪效果 */
.wave::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 200%;
z-index: -1;
background-color: #333;
opacity: 0.1;
transform: translate(-25%);
animation: wave 0.5s linear infinite alternate;
}
/* 動(dòng)畫效果 */
@keyframes wave {
from {
transform: translate(0);
}
to {
transform: translate(-50%);
}
}

代碼中，我們首先創(chuàng)建了一個(gè)父容器，它包含了我們需要?jiǎng)?chuàng)建波動(dòng)效果的線條。之后，我們使用CSS的偽元素before來創(chuàng)建一個(gè)覆蓋整個(gè)父容器的長(zhǎng)方形。當(dāng)我們將其上下左右的定位都設(shè)置為0時(shí)，它就會(huì)完全遮擋住父容器。之后，我們將它的寬度和高度都設(shè)置為200%。這樣，它就會(huì)比父容器大4倍。這樣做是為了保證波浪效果可以在整個(gè)父容器中循環(huán)播放。當(dāng)然，我們也需要將它的z-index設(shè)置為-1，這樣它就會(huì)在父容器的下面。

接下來，我們添加了一些動(dòng)畫效果。在這個(gè)效果中，我們將從0到1和從1到0時(shí)的長(zhǎng)方形的位置進(jìn)行了變化。通過交替播放，我們就可以實(shí)現(xiàn)波浪的效果。

最后，我們只需將所需要的線條的class設(shè)置為wave即可。這樣，我們就可以輕松地創(chuàng)建出一個(gè)奇妙的波浪效果了。