CSS實現圓實現水浪波形

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #4CAF50;
position: relative;
overflow: hidden;
}
.wave {
position: absolute;
height: 100%;
width: 200%;
left: -50%;
top: 0;
background: #fff;
animation: wave 2s infinite;
}
@keyframes wave {
0% {
transform: translateX(0) translateY(-10px);
}
50% {
transform: translateX(50%) translateY(10px);
}
100% {
transform: translateX(0) translateY(-10px);
}
}

解析：

首先我們創建一個圓的DIV，給DIV設置圓形的樣式，然后設置它的position為relative，用于將要添加的水波DIV設置為絕對定位，避免影響其他元素的定位。

接下來就是添加水波DIV了，將它絕對定位到父容器的頂部，高度為100%，寬度為父容器寬度的2倍，left設置為負的50%，讓它的左半部分在父容器的左半部分外面。然后給它添加一個動畫，并且將動畫設置為無限循環。

最后我們定義一個名為wave的動畫，用來控制水波的形變。初始狀態，水波向上移動了10個像素，過50%的動畫時間，水波y軸向下移動10個像素，模擬出水波的波動效果，最后回到原始位置。大概就這樣子！