div+js实现圆圈进度条时间倒计时动画效果代码
代码语言:html
所属分类:布局界面
代码描述:div+js实现圆圈进度条时间倒计时动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .countdown{ --number-color: hsl(0 0% 100%); --text-color: hsl(0 0% 25%); --dot-color: hsl(0 0% 10%); --dot-color-remaining: hsl(182, 100%, 66%); --dot-color-active: hsl(0 100% 50%); font-family: system-ui, sans-serif; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; width: min(60rem, 100%); margin-inline: auto; container: inline-size; > .part { aspect-ratio: 1/1; display: grid; place-items: center; > .remaining { grid-area: 1/1; color: hsl(0 0% 100%); display: grid; text-align: center; font-size: 4cqi; >.number { color: var(--number-color); } >.text { color: var(--text-color); text-transform: uppercase; font-size: 0.5em; } } > .dot-container { grid-area: 1/1; height: 100%; width: 4%; rotate: calc(360deg / var(--dots) * var(--dot-idx)); > .dot { width: 100%; aspect-ratio: 1/1; background-color: var(--dot-color); border-radius: 50%; transition: background-color .25s; &[data-active=true]{ background-color: var(--dot-color-remaining); &[data-lastactive=true]{ background-color: var(--dot-color-active); } } } } } } * { box-sizing: border-box } html, body { height: 100% } body { margin: 0; padding: 2rem; background-color: hsl(0 0% 0%); display: grid; gap: 1rem; align-content: center; } h1 { font-family: system-ui, sans-serif; color: hsl(0 0% 100%); text-align: center; >span:last-of-type{ color: hsl(182 100% 66%) } } </style> </head> <body translate="no"> <h1>Countdown to <span>New Year</span></h1> <div class="countdown" data-target-date="2029-01-01 00:00:00"></div> <script > const countdownEls = document.querySelectorAll(".countdown"); countdownEls.forEach(countdownEl => createCountdown(countdownEl)); function createCountdown(countdownEl) { const target = new Date(new Date(countdownEl.dataset.targetDate).toLocaleString('en')); const parts = { days: { text: ["days", "day"], dots: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0