CSS3波浪線是一種非常流行的網(wǎng)頁裝飾效果，它通常被用于美化頁面中的標(biāo)題、文本框、圖片等元素。下面我們來介紹一下如何使用CSS3實現(xiàn)波浪線效果。

.wave {
position: relative;
height: 80px;
width: 100%;
background-color: #ffffff;
}
.wave:before {
content: '';
display: block;
position: absolute;
border-radius: 100% 50%;
width: 140%;
height: 300px;
top: -200px;
left: -20%;
background-color: #f8e1c1;
transform-origin: center top;
animation-name: wave;
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.wave:after {
content: '';
display: block;
position: absolute;
border-radius: 100% 50%;
width: 140%;
height: 250px;
top: -180px;
left: -10%;
background-color: #ffc49a;
transform-origin: center top;
animation-name: wave2;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes wave2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}

首先，我們需要創(chuàng)建一個包含波浪線效果的元素，比如一個div。然后，在該元素的:before和:after偽類中分別定義兩個波浪線效果。其中，主要使用了border-radius屬性來定義圓角效果、transform-origin屬性來定義旋轉(zhuǎn)中心點、animation屬性來定義動畫效果。

通過上述代碼，可以實現(xiàn)一個簡單的波浪線效果。需要注意的是，如果不需要旋轉(zhuǎn)動畫效果，可以將animation相關(guān)的屬性都去掉。