SVG 圆环动画 – 有爱前端

http://codepen.io/explosion/pen/aJvyLG

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple SVG circle graph with animation</title> <style type="text/css"> .score-circle { stroke: #1e1935; -webkit-transition: stroke-dashoffset 1s ease-out; transition: stroke-dashoffset 1s ease-out; } .score-empty { stroke: #ddd; } .score-text { fill: #1e1935; font: bold 4rem "Poppins", Helvetica, Arial, sans-serif; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; width: 100vw; height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .button { margin-top: 2rem; font: bold 1.75rem "Poppins", Helvetica, Arial, sans-serif; padding: 0.5rem 1.5rem; background: transparent; border: 6px solid; cursor: pointer; box-shadow: 3px 3px 0 #1e1935; } </style> </head> <body>     <svg class="score" width="400" height="400" viewBox="-25 -25 400 400"> <circle class="score-empty" cx="175" cy="175" r="175" stroke-width="25" fill="none"></circle> <circle class="js-circle score-circle" transform="rotate(-90 175 175)" cx="175" cy="175" r="175" stroke-dasharray="1100" stroke-width="25" stroke-dashoffset="1100" fill="none"></circle> <text class="js-text score-text" x="50%" y="50%" dx="-25" text-anchor="middle"></text> </svg>  <button class="js-button button">Change value</button> </body> <script type="text/javascript"> // DOM Elements const button = document.querySelector('.js-button') const circle = document.querySelector('.js-circle') const text = document.querySelector('.js-text') // Circle radius, diameter and offset function const radius = circle.getAttribute('r') const diameter = Math.round(Math.PI * radius * 2) const getOffset = (val = 0) => Math.round((100 - val) / 100 * diameter) // Generate random number and set offset and percentage const run = () => { const val = Math.floor(Math.random() * 100) circle.style.strokeDashoffset = getOffset(val) text.textContent = `${val}%` } // Event listeners button.addEventListener('click', run) document.addEventListener('DOMContentLoaded', () => setTimeout(run, 10)) </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » SVG 圆环动画