欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端实现水波图动态效果

程序员文章站 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>

前端实现水波图动态效果