这一次在b站看到一个博主做的一个倒计时的动画效果,跟着做了一下。以下是对此次项目的一些记录与总结。
该项目效果链接:Vue倒计时
- HTML部分:
<div id="app">
<div id="countdown">
<svg :width="size" :height="size">
<circle fill="transparent" :stroke-width="stroke" stroke="#eee" :r="radius" :cx="circleoffset" :cy="circleoffset" stroke-linecap="round"></circle>
<circle class="circle" fill="transparent" :stroke-width="stroke" stroke="#000" :r="radius" :cx="circleoffset" :cy="circleoffset" stroke-linecap="round" :stroke-dasharray="circumference" :stroke-dashoffset="progress">