我们知道css3动画可以实现很漂亮的动画效果，例如：水纹波动，电池充电...，那么下面看看如何实现的

1.水纹波动效果实现：

html:

<div class="sea">
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>

css:

.sea {
width: 300px;
height: 300px;
background-color: whitesmoke;
background-image: linear-gradient(darkblue, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.5));
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.sea .wave {
position: absolute;top: -250px;left: -100px;width: 500px;
height: 500px;
background: deepskyblue;
border-radius: 43%;
filter: opacity(0.4);
animation: drift linear infinite;
transform-origin: 50% 48%;
}
.sea .wave:nth-of-type(1) {animation-duration: 5s;}
.sea .wave:nth-of-type(2) {animation-duration: 7s;}
.sea .wave:nth-of-type(3) {animation-duration: 9s;background-color: orangered;filter: opacity(0.1);}
@keyframes drift { from {transform: rotate(360deg);}
}

2.电池充电效果

html:

<div class="battery">
<div class="batbox">
<div class="batteryVal">
<div class="wave">
<span></span> <span></span> <span></span>
</div>
</div>
</div>
</div>

CSS:

.battery{width: 150px;height: 250px;background: #fff;border-radius: 8px;border: 1px solid #eee;margin: 100px auto 0 auto;position: relative;}
.battery:before{content: "";width: 30px;height: 20px;display: block;background: #eee;position: absolute;left: 60px;top: -20px;z-index: 9;border-radius: 6px 6px 0 0;}
.batbox{width: 150px;height: 250px;overflow: hidden;display: flex;align-items: flex-end;}
.batteryVal{width: 100%;height: 0;margin-top: 150px;position: relative;background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);animation: bty ease-in-out 5s infinite;border-radius:  0 0 6px 6px;}
.wave{width: 100%;height: 150px;border-radius: 20px;position: relative;left: 0;top: -150px;z-index: 1;}
.wave span{width: 300px;height:350px;display: block;border-radius: 20% 10%;animation: waves ease-in-out 6s infinite;position: absolute;top: -140px;left: -50px;}
.wave span:nth-of-type(1){background: rgba(255,255,255,1);transition-delay: 0;border-radius: 30%;}
.wave span:nth-of-type(2){background: rgba(255,255,255,.25);transition-delay: 3;border-radius: 48%;transform: rotate(-320deg)}
.wave span:nth-of-type(3){background: rgba(255,255,255,.45);transition-delay: 7;border-radius: 30%;transform: rotate(40deg)}
@keyframes bty{
0{
height: 0;
filter: hue-rotate(14deg);
}
25%{
height: 30%;
filter: hue-rotate(45deg);
}
50%{
height: 60%;
filter: hue-rotate(75deg);
}
100%{
height: 100%;
filter: hue-rotate(80deg);
}
}
@keyframes waves{
100%{
transform: rotate(720deg);
}
}

3.元素临近相融合特效：

html:

<div class="box">
<div class="ball1"></div>
<div class="ball2"></div>
</div>

css:

.box{width: 300px;height: 100px;border: 1px solid #eee;position: relative; filter: contrast(15);background: #fff;}
.ball1{width: 60px;height: 60px;background: #333;border-radius: 50%;position:absolute ;left: 0;top: 20px;animation: lef ease-out 4s infinite;  filter: blur(6px);}
.ball2{width: 30px;height: 30px;background: #0000FF;border-radius: 50%;position:absolute ;right: 0;top: 35px;animation: rig ease-out 4s infinite;filter: blur(6px);}
@keyframes lef{
0%{
left: 0;
}
100%{
left: 50%;
}
}
@keyframes rig{
0%{
right: 0;
}
100% {
right: 50%;
}
}

细节注意：融合元素父级使用滤镜：contrast, 并且设置一个背景色(没有背景元素有模糊效果)

融合子元素使用blur滤镜