装水波纹进度条效果
代码语言:html
所属分类:进度条
代码描述:装水波纹进度条效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; outline: none; } body { background: #020438; font: 14px/1 'Open Sans', helvetica, sans-serif; -webkit-font-smoothing: antialiased; } .box { height: 280px; width: 280px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #020438; border-radius: 100%; overflow: hidden; } .box .percent { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; display: -webkit-box; display: flex; display: -webkit-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; color: #fff; font-size: 64px; } .box .water { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); background: #4D6DE3; -webkit-transition: all .3s; transition: all .3s; } .box .water_wave { width: 200%; position: absolute; bottom: 100%; } .box .water_wave_back { right: 0; fill: #C7EEFF; -webkit-animation: wave-back 1.4s infinite linear; animation: wave-back 1.4s infinite linear; } .box .water_wave_front { left: 0; fill: #4D6DE3; margin-bottom: -1px; -webkit-animation: wave-front .7s infinite linear; animation: wave-front .7s infinite linear; } @-webkit-keyframes wave-front { 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes wave-front { 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @-webkit-keyframes wave-back { 100% { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); } } @keyframes wave-back { 100% { -webkit-transform: translate(50%, 0); transform: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0