div+css实现炫酷速度仪表盘进度条动画效果代码
代码语言:html
所属分类:进度条
代码描述:div+css实现炫酷速度仪表盘进度条动画效果代码
代码标签: div css 炫酷 速度 仪表盘 进度条 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> @property --progress { syntax: "<number>"; initial-value: 0; inherits: true; } :root { --color-primary: #ef6416; --color-surface: black; --progress: 100; -webkit-animation: progress-demo 5s ease-in infinite; animation: progress-demo 5s ease-in infinite; } .scene { display: grid; place-items: center; position: absolute; filter: saturate(1.2) brightness(1.7); --content: calc(var(--progress) * 0.88); } .gear { position: absolute; width: 65vmin; aspect-ratio: 1; display: grid; place-items: center; --gradient-progress: calc(var(--progress) * 0.8%); --line-highlight: calc( var(--progress) * 2.876deg - 143.45deg ); border-radius: 50%; background: radial-gradient(14vmin 10vmin at 50% 90%, #0a0a0a, transparent), var(--color-surface); -webkit-mask: conic-gradient(from 150deg, transparent 17.2%, black 0%), radial-gradient(transparent 42%, black 42%); mask: conic-gradient(from 150deg, transparent 17.2%, black 0%), radial-gradient(transparent 42%, black 42%); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; } .gear:before { counter-reset: content var(--gear-content); content: counter(content); position: absolute; display: grid; place-items: center; translate: 0 26.5vmin; box-shadow: -0.4vmin -0.4vmin 0.8vmin black, 0.4vmin 0.4vmin 0.8vmin black, 0vmin 0vmin 2vmin 0.1vmin rgba(0, 0, 0, 0.5); font-size: 4vmin; font-family: "Rajdhani", sans-serif; font-weight: 400; filter: brightness(0.5); background: black; border: 0.1vmin solid rgba(255, 255, 255, 0.15); padding: 0.5vmin 1.25vmin; min-width: 2.5vmin; border-radius: 1vmin; } .circle { position: absolute; width: 70vmin; aspect-ratio: 1; --gradient-progress: calc(var(--progress) * .8%); --line-highlight: calc(var(--progress) * 2.876deg - 143.45deg); background: radial-gradient(black 34%, transparent 43%), conic-gradient(from var(--line-highlight), rgba(245, 181, 136, 0.3) 0.1%, transparent 0.6%), radial-gradient(transparent 30%, transparent 40%, rgba(0, 0, 0, 0.8) 42.8%, black 45%, rgba(0, 0, 0, 0.85) 54%, transparent 68%, rgba(255, 255, 255, 0.1) 65%, transparent 66%, transparent 70%), radial-gradient(transparent 67%, rgba(0, 0, 0, 0.49) 71%, black), radial-gradient(transparent 65%, rgba(0, 0, 0, 0.87) 69%, black), conic-gradient(from -143deg, var(--color-primary) var(--gradient-progress), black 0%); border-radius: 50%; -webkit-mask: radial-gradient(9.5vmin at 28% 85%, black 50%, transparent), conic-gradient(from -143deg, transparent var(--gradient-progress), black 0%), radial-gradient(transparent 42%, black 42%); mask: radial-gradient(9.5vmin at 28% 85%, black 50%, transparent), conic-gradient(from -143deg, transparent var(--gradient-progress), black 0%), radial-gradient(transparent 42%, black 42%); -webkit-mask-composite: xor, xor; mask-composite: exclude, exclude; z-index: -1; } .inner-circle { position: absolute; width: 35.1vmin; aspect-ratio: 1; --gradient-progress: calc(var(--progress) * 0.8%); --line-highlight: calc( var(--progress) * 2.876deg - 143.45deg ); background: conic-gradient(from -143deg, var(--color-primary) var(--gradient-progress), black 0%); border-radius: 50%; -webkit-mask: radial-gradient(black 64%, transparent 68%), conic-gradient(from -143deg, black var(--gradient-progress), transparent 0%); mask: radial-gradient(black 64%, transparent 68%), conic-gradient(from -143deg, black var(--gradient-progress), transparent 0%); -webkit-mask-composite: xor; mask-composite: exclude; } .speed { position: absolute; display: grid; place-items: center; width: 35vmin; aspect-ratio: 1; border-radius: 50%; --h1: rgba(255, 255, 255, 0.01); --h2: rgba(255, 255, 255, 0.06); background: radial-gradient(transparent 62%, black 90%, rgba(255, 255, 255, 0.2) 92%), radial-gradient(transparent 62%, black 90%, rgba(255, 255, 255, 0.2) 92%), radial-gradient(transparent 62%, black 70%, black 90%), conic-gradient(transparent, var(--h2), transparent, var(--h2), transparent, var(--h2), transparent, var(--h2), transparent, var(--h2), transparent), conic-gradient(var(--h1), black, var(--h1)); border: 1px solid rgba(255, 255, 255, 0.04); z-index: 1; } .speed .pulse { position: absolute; width: 20vmin; aspect-ratio: 1; border-radius: inherit; --h1: rgba(255, 255, 255, 0.03); background: conic-gradient(var(--h1), transparent, transparent, transparent, var(--h1)), black; transform: scale(calc(0.8 + 0.35 * var(--progress) / 100)); transition: transform 0.3s ease, opacity 0.3s ease; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0