CSS3动画属性，给概化图做水流量动态流向

最新推荐文章于 2025-04-26 12:46:19 发布

qq_43314629

最新推荐文章于 2025-04-26 12:46:19 发布

阅读量700

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css css3 animation

本文链接：https://blog.youkuaiyun.com/qq_43314629/article/details/115658944

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用CSS3的`stroke-dasharray`和动画属性（如`animation:run100slinearinfinite`和`@keyframesrun`）来为图表创建动态的水流量流向效果。通过关键帧动画控制`stroke-dashoffset`的变化，为视觉呈现增添动态感。

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

CSS3动画属性，给概化图做水流量动态流向

.runing {
    stroke-dasharray: 30, 5;
    animation: run 100s linear infinite;
  }
  @keyframes run {
    from {
      stroke-dashoffset: 100%;
    }
    to {
      stroke-dashoffset: 0%;
    }
  }
  .runing2 {
    stroke-dasharray: 30, 5;
    animation: path-animation 100s linear infinite;
  }
  @keyframes path-animation {
    from {
      stroke-dashoffset: 0%;
    }
    to {
      stroke-dashoffset: 100%;
    }
  }

}