AI summary
type
status
date
Jul 26, 2024 05:33 AM
slug
summary
tags
category
icon
password

Notes

stroke-dasharray

说到了解这一属性，还是源于对 cypress 官网的一段动画感兴趣
查看 element，发现这部分是 svg 实现的
notion image
进一步，source 里搜索 path-left，能看到源码是通过transition 实现的动画，不过结合了这个属性 - stroke-dasharray
根据 MDN(‣) 的说明，该指标用于指定 stroke 线条(lines)和空隙(gaps)的排列
关于 stroke-dasharray 的详细介绍可查看 MDN，这里只总结一些 tricks：
  1. MDN 关于 <dasharray> value 的介绍其实有点啰嗦，个人总结就是不论 array 有几个值（1 个/2 个/3个），svg 就是根据你的赋值重复绘制 [线条，空隙，线条，空隙 …] ，还不明白的话可以到 MDN 的 playground 里自己多测试不同的 case
  1. 可以利用 stroke-dasharray 和 transition 实现 Animation 动画效果，就如上述 cypress 官网示例
  1. stroke-dasharray 并不限制水平方向，而是根据 svg 图形决定，例如这篇帖子设定了圆形的间距。而关于 stroke-dasharray 支持的标签类型，MDN 里也有列出

feTurbulence

静态图片流动效果

Reference

相关文章
浏览器 BOM 总结
CSS 总结
Web 性能优化 - Frame 篇
Vite StudyWeb 性能优化 - Frame 篇