在現(xiàn)代的網(wǎng)頁設(shè)計(jì)中，動(dòng)態(tài)波浪圖是一種非常流行的效果。通過CSS技術(shù)，可以很方便地實(shí)現(xiàn)這種圖形效果。下面我們就來講講如何使用CSS技術(shù)來創(chuàng)建動(dòng)態(tài)波浪圖。

.wave {
position: relative;
width: 100%;
height: 500px;
background-color: #fff;
}
.wave:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background-color: #3299CC;
transform-origin: bottom center;
animation: wave 5s ease-in-out infinite;
}
.wave:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 75px;
background-color: #006699;
transform-origin: bottom center;
animation: wave-reverse 7s ease-in-out infinite;
}
@keyframes wave {
0% {
transform: skewY(0deg);
}
25% {
transform: skewY(5deg);
}
50% {
transform: skewY(0deg);
}
75% {
transform: skewY(-5deg);
}
100% {
transform: skewY(0deg);
}
}
@keyframes wave-reverse {
0% {
transform: skewY(0deg);
}
25% {
transform: skewY(-5deg);
}
50% {
transform: skewY(0deg);
}
75% {
transform: skewY(5deg);
}
100% {
transform: skewY(0deg);
}
}

如上述代碼所示，我們首先創(chuàng)建了一個(gè)波浪圖的容器類“wave”，然后使用偽元素“before”和“after”來實(shí)現(xiàn)波浪的效果。

在“before”偽元素中，我們設(shè)置了它的樣式，包括顯示方式為塊級(jí)元素，定位到容器類的左下角，設(shè)置寬度、高度及背景色等屬性，同時(shí)設(shè)置了動(dòng)畫屬性“wave”。

“after”偽元素中的樣式設(shè)置和“before”相似，只是去掉了動(dòng)畫屬性“wave”，添加了動(dòng)畫屬性“wave-reverse”，它是一個(gè)反向動(dòng)畫，讓波浪向相反方向運(yùn)動(dòng)。

最后，我們在樣式表中定義了兩個(gè)動(dòng)畫“wave”和“wave-reverse”，分別用于實(shí)現(xiàn)向上和向下的波浪動(dòng)畫效果。

通過這樣的代碼，就可以實(shí)現(xiàn)一個(gè)簡單的動(dòng)態(tài)波浪圖效果，可以靈活地根據(jù)需求調(diào)整參數(shù)，實(shí)現(xiàn)更加復(fù)雜的效果。