div+css实现墙角电池依靠充电动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现墙角电池依靠充电动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .battery { --br: 1vmin; --brc: #1f2020; box-sizing: border-box; position: relative; width: 20vmin; height: calc(50vmin + 2 * var(--br)); border: var(--br) solid var(--brc); border-radius: 2vmin; top: 5vmin; --s: 10vmin; --c1:#FBF7F4; --c2:#5E9FA3; --n: 5; background: linear-gradient(var(--c1) calc(calc(var(--s)/2) * var(--n)), #0000 0), linear-gradient(var(--c2) calc(100% - 1.41vmin), #0000 0) 50% 0.71vmin/75% calc(var(--s)/2) repeat-y, radial-gradient(var(--c2) 50%, var(--c1) 52%) 0 0/calc(var(--s)/2 - var(--br)/2) calc(var(--s)/2); animation: bat-level 10s steps(12, jump-both) infinite alternate; } .battery:before { font-family: system-ui, sans-serif; font-size: 1.8vmin; line-height: 0.8; --h: 3.5vmin; box-sizing: border-box; --p: calc(10 * (10 - var(--n))); counter-reset: variable var(--p); content: counter(variable) "%"; --clr: color-mix(in lab, var(--c2), #fff9 60%); color: var(--clr); text-align: center; position: absolute; width: 40%; left: 30%; height: var(--h); top: calc(-1 * var(--h)); border: inherit; border-radius: 1vmin 1vmin 0 0; background-color: var(--brc); } @keyframes bat-level { 0% { --n: 10; --c2: #E23636; } 10% { --n: 9; --c2: #E23636; } 20% { --n: 8; --c2: #E23636; } 27% { --c2: #F3D060; } 30% { --n: 7; --c2: #F3D060; } 40% { --n: 6; --c2: #F3D060; } 47% { --c2:#5E9FA3; } 50%, 100% { --n: 5; --c2:#5E9FA3; } 60% { --n: 4; } 70% { --n: 3; } 80% { --n: 2; } 90% { --n: 1; } 100% { --n: 0; } } /* fluff the wall and the shadow*/ .noise { display: hidden; } .battery { transform-style: preserve-3d; transform: rotatex(20deg) rotatez(-2deg); } .battery:after { transform-style: preserve-3d; transform: translatez(-5px); content: ""; position: absolute; width: 200%; height: 100%; ri.........完整代码请登录后点击上方下载按钮下载查看
网友评论0