CSS驱动svg动画演示

马黑黑

代码：

马黑黑

CSS对svg天然支持，支持度还挺高，所以CSS @keyframes 动画用于svg是推荐的做法，除非CSS无法胜任——这也是事实存在的。

CSS能驱动的svg动画比我们想象的丰富，比如改变 rect 或 ellipse 的 rx、ry属性值，都可以通过 @keyframe + animation 实现。动画 change 及调用也在CSS中完成。

style标签写在svg之外、之内有区别：写在内、外，嵌入HTML中的svg代码都能正常运行；要将svg代码存为 .svg 文档的，必须将CSS代码作为子标签写在 svg 标签内。

一楼示例，CSS设置了 rect 的基本样式，囊括了包含填充、描边、描边线厚度、描边线虚线、转换原点（transform-origin）等等在内的属性。

红影

最大的那个，加入了圆角，所以变成了圆，只写 rx="50%"就可以了？ry不用写的么？

马黑黑

红影 发表于 2024-10-2 11:03
最大的那个，加入了圆角，所以变成了圆，只写 rx="50%"就可以了？ry不用写的么？

rx，ry 任意一个缺省时，其值跟随另一个

红影

.rect:nth-child(even) { animation-delay: -1s; }
这个好奇怪，如果是奇数各个矩形就是错位的，如果是偶数就是平行的。

马黑黑

红影 发表于 2024-10-2 11:08
.rect:nth-child(even) { animation-delay: -1s; }
这个好奇怪，如果是奇数各个矩形就是错位的，如果是偶 ...

偶数提前运行1秒的结果

红影

用<defs>封装了线条渐变，然后用在矩形中，还把这些矩形组合起来，形成这么漂亮的图案。
svg真是创意无限，黑黑真是创意无限

梦江南

老师的肚里都 是代码哈！

马黑黑

梦江南 发表于 2024-10-2 11:40
老师的肚里都 是代码哈！

红影

马黑黑 发表于 2024-10-2 11:07
rx，ry 任意一个缺省时，其值跟随另一个

哦哦，知道了。谢谢黑黑

红影

马黑黑 发表于 2024-10-2 11:11
偶数提前运行1秒的结果

我试了好几个数字，都是这样。

马黑黑

红影 发表于 2024-10-2 13:51
我试了好几个数字，都是这样。

1,3,5等都可以。注意duration设置是8s

红影

马黑黑 发表于 2024-10-2 13:58
1,3,5等都可以。注意duration设置是8s

好像我设置更大的数值也一样，它貌似只分奇偶。

花飞飞

这个只是错位了一下，色彩没有流动，位置是固定的。。。
stroke-dashoffset: 300;动画里加这一句就跟贴子里的效果一样了。。
也好看。。

马黑黑

花飞飞 发表于 2024-10-2 15:37
这个只是错位了一下，色彩没有流动，位置是固定的。。。
stroke-dashoffset: 300;动画里加这一句就跟贴子 ...

对。

马黑黑

红影 发表于 2024-10-2 14:29
好像我设置更大的数值也一样，它貌似只分奇偶。

是的

花飞飞

马黑黑 发表于 2024-10-2 18:05
对。

幸好两边不一样，怎么动起来的印象更深刻一些了

马黑黑

花飞飞 发表于 2024-10-2 18:31
幸好两边不一样，怎么动起来的印象更深刻一些了

红影

马黑黑 发表于 2024-10-2 18:05
是的

真奇妙。