CSS是一種用于網(wǎng)頁(yè)設(shè)計(jì)的樣式表語(yǔ)言，其作用是為網(wǎng)頁(yè)添加樣式和布局。其中，加波浪號(hào)是CSS中的一種常用技巧。

.wave {
position: relative;
background-color: #f5f5f5;
height: 100px;
}
.wave:before {
content: "";
display: block;
position: absolute;
background: linear-gradient(to bottom, #e0e0e0 0%, #ffffff 100%);
width: 100%;
height: 100px;
z-index: 1;
}
.wave:after {
content: "";
display: block;
position: absolute;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23007aff' d='M0,288L34.3,248C68.6,208,137,128,206,80C274.3,32,343,16,411,42.7C480,69,549,139,617,176C685.7,213,754,219,823,213.3C891.4,208,960,192,1029,186.7C1097.1,181,1166,187,1234,218.7C1302.9,250,1371,308,1406,336L1440,320L1440,0L1405.7,0C1371.4,0,1303,0,1234,0C1165.7,0,1097,0,1029,0C960,0,891,0,823,0C754.3,0,686,0,617,0C548.6,0,480,0,411,0C342.9,0,274,0,206,0C137.1,0,68,0,34,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
width: 100%;
height: 100px;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
}
@keyframes wave {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-1440px);
}
}

實(shí)現(xiàn)這個(gè)效果的關(guān)鍵在于在:after偽元素中嵌入一個(gè)SVG波浪線圖形，并用CSS的動(dòng)畫(huà)功能設(shè)置波浪的移動(dòng)速度和方向，形成了有趣的波浪效果。