前端实现水波图动态效果
程序员文章站
2023-09-07 17:28:18
来自：https://blog.csdn.net/sheng_li/article/details/84347987 侵删
来自：https://blog.csdn.net/sheng_li/article/details/84347987 侵删
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> body, div, h1, h2, h3, html, li, p, ul { margin: 0; padding: 0; box-sizing: border-box; } .boll { height: 174px; width: 174px; border-radius: 50%; border: 2px solid #fe810c; float: left; position: relative; font-size: 14px; overflow: hidden; } .text { text-align: center; margin-top: 40px; color: #fe810c; } .num { font-size: 30px; } .water { height: 50%; background: url(img/20181122201631427.png) repeat-x; position: absolute; width: 100%; -webkit-animation: move_wave 4s linear infinite; animation: move_wave 4s linear infinite; } .w1 { opacity: .5; background-position: 120px 0; -webkit-animation: move_wave 10s linear infinite; animation: move_wave 10s linear infinite; } .w2 { opacity: .3; background-position: 60px 0; -webkit-animation: move_wave 8s linear infinite; animation: move_wave 8s linear infinite; } @-webkit-keyframes move_wave { 0% { background-position: 0 0 } to { background-position: 532px 0 } } @keyframes move_wave { 0% { background-position: 0 0 } to { background-position: 532px 0 } } </style> </head> <body> <div class="boll"> <div class="text"> <p class="num">6542.3214</p> <p>btc</p> </div> <div class="water w1"></div> <div class="water w2"></div> <div class="water"></div> </div> </body> </html>