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>