css实现波浪纹，水波纹动画
1.示意图
2.结构
3.wave.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS实战 - 波浪</title>
<style type="text/css">
.wave-box{
border: 1px solid rgba(0,209,255,0.2);
height: 78.5px;
width: 78.5px;
border-radius: 50%;
overflow: hidden;
margin: auto;
position: relative;
background: #eee;
}
.wave-box .text{
font-size: 24px;
color: #FFFFFF;
letter-spacing: 0;
position: absolute;
z-index: 85;
display: block;
width: 78px;
text-align: center;
top: 20px;
}
.water {
height: 100%;
width: 100%;
position: absolute;
top: 20px;
background: url('wave_blue.svg') repeat-x;
background-position: 0 20px;
-webkit-animation: move_wave 14s linear infinite;
animation: move_wave 14s linear infinite;
}
.w1 {
opacity: .5;
background-position: 120px 0;
-webkit-animation: move_wave 19s linear infinite;
animation: move_wave 19s linear infinite;
}
.w2 {
opacity: .3;
background-position: 60px 0;
-webkit-animation: move_wave 23s linear infinite;
animation: move_wave 23s linear infinite;
}
@-webkit-keyframes move_wave {
0% { background-position: 0 0 }
to { background-position: 232px 0 }
}
@keyframes move_wave {
0% { background-position: 0 0 }
to { background-position: 232px 0 }
}
</style>
</head>
<body>
<div class="wave-box">
<span class="text">35个</span>
<div class="water w1"></div>
<div class="water w2"></div>
<div class="water"></div>
</div>
</body>
</html>
3.wave_blue.svg图片
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240px" height="75px" viewBox="0 0 240 75" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 58 (84663) - https://sketch.com -->
<title>蓝博文</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="52.1506169%" y1="100%" x2="52.1506169%" y2="9.07623828%" id="linearGradient-1">
<stop stop-color="#1F78B6" offset="0%"></stop>
<stop stop-color="#1EC2E2" offset="100%"></stop>
</linearGradient>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M0,15.5981057 C17.1009532,15.5981057 19.5223044,0.0156938776 36.2301997,0.0156938776 C52.938095,0.0156938776 54.8055321,13.5714733 66.4395144,13.5714733 C78.0734967,13.5714733 84.9898302,-0.534635292 104.120465,0.0156938776 C122.821214,0.553656572 132.620158,15.5981057 152.543102,15.5981057 C163.366959,15.5981057 177.807487,0.0156938776 195.442818,0.0156938776 C213.078149,0.0156938776 225.496365,15.5981057 240,15.5981057 C240,15.5981057 240,35.3987371 240,75 L0,75 C0,35.3987371 0,15.5981057 0,15.5981057 Z" id="蓝" fill="url(#linearGradient-1)"></path>
</g>
</svg>
