CSS是一種強(qiáng)大而又富有創(chuàng)意的編程語言，它可以輕松實現(xiàn)復(fù)雜的樣式、動畫和可視化效果，其中波浪圖案是一種很受歡迎的設(shè)計元素。本文將介紹如何使用CSS創(chuàng)建漂亮的波浪效果。

/* 首先，我們需要定義一個 div 元素 */
#wave {
width: 100%;
height: 200px;
background-color: #88c8f7;
position: relative;
}
/* 然后定義兩個偽元素，通過旋轉(zhuǎn)和變形創(chuàng)建波浪形狀 */
#wave::before, #wave::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #88c8f7;
}
#wave::before {
top: -20px;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
}
#wave::after {
bottom: -60px;
border-radius: 0 0 50% 50%;
transform: rotate(-45deg);
}
/* 最后，使用動畫效果讓波浪滾動起來 */
#wave {
animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
0% {
transform: translateX(0) rotate(-45deg);
}
50% {
transform: translateX(50px) rotate(-45deg);
}
100% {
transform: translateX(0) rotate(-45deg);
}
}

解釋一下代碼的實現(xiàn)方式：首先，我們創(chuàng)建一個名為 #wave 的 div 元素，并設(shè)置它的高度和背景顏色。接著，我們定義兩個偽元素來實現(xiàn)波浪形狀，分別位于上方和下方。使用 border-radius 屬性來改變圓角的形狀，transform 屬性改變元素的位置和旋轉(zhuǎn)角度。

最后，為 #wave 元素添加動畫效果，使用 keyframes 關(guān)鍵字創(chuàng)建一個名為 wave 的動畫，并設(shè)置初始位置和結(jié)束位置的 transform 屬性，從而實現(xiàn)波浪的滾動效果。

使用CSS來繪制波浪圖案不僅簡單易懂，而且開發(fā)效率也很高。只需要稍稍調(diào)整屬性，就可以創(chuàng)建出不同形狀的波浪，從而滿足不同的設(shè)計需要。