Vue倒计时动画效果

最新推荐文章于 2024-06-19 09:49:44 发布

皮皮艺术家

最新推荐文章于 2024-06-19 09:49:44 发布

阅读量2.1k

点赞数 4

分类专栏：学习前端的记录文章标签： javascript css vue.js html 前端

本文链接：https://blog.csdn.net/m0_46458651/article/details/114287313

版权

本文记录了一次使用Vue实现倒计时动画的过程，主要通过SVG的stroke-dasharray和stroke-dashoffset属性实现。HTML部分创建了两个重叠的无填充圆，CSS用于界面布局，Vue.js用于数据管理和动画效果。倒计时通过调整stroke-dashoffset的值以模拟进度变化，最终达到倒计时动画的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一次在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">