纯css实现波浪动画，超级简单
前⾔：之前在博客上看到⼀位⼤神⽤css实现的⽔波动画，真是受益匪浅，原来本以为要会svg、canvas等技术，原来根本不需要，只需css简短的⼗⼏⾏代码就可以达到效果。关键是⼤神的这种思路，⾮常之得我们学习，不多说了，直接上代码。
HTML部分：
<div class="container">
<div class="wave"></div>
</div>
CSS部分：
.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%;svg和canvas的区别
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);
}
}
原理：
原理⼗分简单，我们都知道，⼀个正⽅形，给它添加border-radius: 50%，将会得到⼀个圆形。
border-radius：⽤来设置边框圆⾓，当使⽤⼀个半径时确定⼀个圆形。
好的，如果border-radius没到 50%，但是接近 50% ，我们会得到⼀个这样的图形：
注意边⾓，整个图形给⼈的感觉是有点圆，却不是很圆。
好的，那整这么个图形⼜有什么⽤？还能变出波浪来不成？
没错！就是这么神奇。:) 我们让上⾯这个图形滚动起来(rotate) ，看看效果：
可能很多⼈看到这⾥还没懂旋转起来的意图，仔细盯着⼀边看，是会有类似波浪的起伏效果的。⽽我们的⽬的，就是要借助这个动态变换的起伏动画，模拟制造出类似波浪的效果。
图中的虚线框就是我们实际的视野范围。
怎么样，看到这⾥是不是⼀下就打开思路了。
最终代码：
<!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>
最终效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。