css3动画水波纹、波浪
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html{ font-size: 20px; } body{ background:#444; } @-webkit-keyframes opac{ from { opacity: 1; width:0; height:0; top:50%; left:50%; } to { opacity : 0; width:100%; height:100%; top:0; left:0; } } .animate .w2{ /*延迟1s*/ -webkit-animation-delay:1s; } .animate .w3{ -webkit-animation-delay:2s; } .animate .w4{ -webkit-animation-delay:3s; } .wave{ width: 22.7rem; height: 22.7rem; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; } .wave *{ border:1px solid #fff; position:absolute; border-radius:50%; -webkit-animation:opac 4s infinite; } </style> </head> <body> <div class="animate wave"> <div class="w1"></div> <div class="w2"></div> <div class="w3"></div> <div class="w4"></div> </div> </body> </html>
效果图：
2.波浪
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} body{ background-color: #522350 } .water { position: relative; width: 200px; height: 200px; background-color: rgb(118, 218, 255); border-radius: 50%; margin:200px auto 0; overflow: hidden; } .water:before,.water: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; } .water: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%, -70%) rotate(180deg); } 100% { transform: translate(-50%, -70%) rotate(360deg); } } </style> </head> <body> <div class="water"></div> </body> </html>
效果：
3.波浪
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0px; margin: 0px; font-family: "微软雅黑"; font-size: 100%; font-style: normal } dd, dl, dt, em, i, p, textarea, a, div { padding: 0px; margin: 0px; } a { text-decoration: none; } img { border: 0px; } ul, li { padding: 0px; margin: 0px; list-style: none; } .fl { float: left } .fr { float: right } body { margin: 0px; padding: 0px; color: #000; background: #fff; } a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; } .none { display: none } .fensug { width: 168px; height: 168px; background: #fff; border: 9px #5576ac solid; margin: 100px auto; padding: 5px; -webkit-border-radius: 25em; -moz-border-radius: 25em; border-radius: 25em; overflow: hidden; position: relative } .fensug .wavenum { width: 168px; height: 168px; overflow: hidden; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; display: table-cell; vertical-align: middle; position: absolute; left: 5px; top: 5px; z-index: 5; display: flex; align-items: center; justify-content: center; flex-direction: column; } .fensug .wavenum b { color: #fff; font-size: 43px; text-align: center; display: block; position: relative; z-index: 2; line-height: 45px; } .fensug .wavenum tt { color: #fff; font-size: 20px; text-align: center; display: block; position: relative; z-index: 2; font-weight: bold; width: 140px; border-top: 2px #fff solid; margin: 3px auto; line-height: 35px; } .waven { width: 168px; height: 168px; webkit-border-radius: 25em; -moz-border-radius: 25em; border-radius: 25em; background: #5576ac; overflow: hidden; position: relative } .wave { width: 408px; height: 80%; position: absolute; left: 0px; bottom: 0; background: url(http://www.17sucai.com/preview/5730/2018-09-20/images/images/wave.png) no-repeat; animation: move_wave 1s linear infinite; -webkit-animation: move_wave 1s linear infinite; } @-webkit-keyframes move_wave { 0% { -webkit-transform: translateX(0) } 50% { -webkit-transform: translateX(-25%) } 100% { -webkit-transform: translateX(-50%) } } @keyframes move_wave { 0% { transform: translateX(0) } 50% { transform: translateX(-25%) } 100% { transform: translateX(-50%) } } </style> </head> <body> <div class="fensug"> <div class="wavenum "><b id="denfenjs">61%</b><tt>2018 Q1</tt></div> <div class="waven"> <div class="wave" style="height: 60%;"> </div> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var waveHeight = 0; var waveNum = 61; function waves() { if (waveHeight < waveNum) { $(".wave").css("height", waveHeight + "%"); waveHeight++; } setTimeout(function() { waves() }, 15); } $(function() { $("#denfenjs").html(waveNum + "%"); waves(); }) </script> </body> </html>
效果图：
