前言：之前在博客上看到一位大神用css實現(xiàn)的水波動畫，真是受益匪淺萍膛，原來本以為要會svg吭服、canvas等技術(shù)，原來根本不需要蝗罗，只需css簡短的十幾行代碼就可以達到效果艇棕。關(guān)鍵是大神的這種思路，非常值得我們學習串塑，不多說了沼琉，直接上代碼。
效果圖
HTML部分：
<span style="font-size:18px;">
<div class="container">
<div class="wave"></div>
</div>
</span>
CSS部分：
<span style="font-size:18px;">.wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
}
.wave:before,
.wave:after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
}
.wave:after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
@keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}</span>
原理：
原理十分簡單桩匪，我們都知道打瘪，一個正方形，給它添加 border-radius: 50%，將會得到一個圓形闺骚。
border-radius：用來設置邊框圓角彩扔，當使用一個半徑時確定一個圓形。
好的僻爽，如果 border-radius 沒到 50%虫碉，但是接近 50% ，我們會得到一個這樣的圖形：
注意邊角进泼，整個圖形給人的感覺是有點圓蔗衡，卻不是很圓。
好的乳绕，那整這么個圖形又有什么用绞惦？還能變出波浪來不成？
沒錯洋措！就是這么神奇济蝉。我們讓上面這個圖形滾動起來(rotate) ，看看效果：
可能很多人看到這里還沒懂旋轉(zhuǎn)起來的意圖菠发，仔細盯著一邊看王滤，是會有類似波浪的起伏效果的。
而我們的目的滓鸠，就是要借助這個動態(tài)變換的起伏動畫雁乡，模擬制造出類似波浪的效果。
圖中的虛線框就是我們實際的視野范圍糜俗。
怎么樣踱稍，看到這里是不是一下就打開思路了。
最終代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wave {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(118, 218, 255);
border-radius: 50%;
}
.wave:before,
.wave:after{
content: "";
position: absolute;
width: 400px;
height: 400px;
top: 0;
left: 50%;
background-color: rgba(255, 255, 255, .4);
border-radius: 45%;
transform: translate(-50%, -70%) rotate(0);
animation: rotate 6s linear infinite;
z-index: 10;
}
.wave:after {
border-radius: 47%;
background-color: rgba(255, 255, 255, .9);
transform: translate(-50%, -70%) rotate(0);
animation: rotate 10s linear -5s infinite;
z-index: 20;
}
@keyframes rotate {
50% {
transform: translate(-50%, -73%) rotate(180deg);
} 100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="wave"></div>
</div>
</body>
</html>
最終效果圖：
如果這篇文章幫助到了你悠抹，請動動小手點下喜歡珠月，你的支持是我最大的動力！
