前端实现水波图动态效果

来自: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>Documenttitle> <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.3214p> <p>BTCp> div> <div class="water w1">div> <div class="water w2">div> <div class="water">div> div> body> html>

前端实现水波图动态效果_第1张图片

你可能感兴趣的:(前端实现水波图动态效果)