马黑黑 发表于 2024-10-2 10:42

CSS驱动svg动画演示

本帖最后由 马黑黑 于 2024-10-2 11:01 编辑 <br /><br /><p style="text-align: center;">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <defs>
                <linearGradient id="lGd" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="red" />
                        <stop offset="25%" stop-color="green" />
                        <stop offset="50%" stop-color="blue" />
                        <stop offset="75%" stop-color="green" />
                        <stop offset="100%" stop-color="red" />
                </linearGradient>
        </defs>
        <rect class="rect" x="5%" y="5%" width="90%" height="90%" rx="50%"/>
        <rect class="rect" x="20%" y="20%" width="60%" height="60%"/>
        <rect class="rect" x="30%" y="30%" width="40%" height="40%"/>
        <rect class="rect" x="30%" y="30%" width="40%" height="40%"/>
        <rect class="rect" x="40%" y="40%" width="20%" height="20%"/>
        <rect class="rect" x="40%" y="40%" width="20%" height="20%"/>

        <!-- CSS代码 -->
        <style>
                .rect {
                        fill: none;
                        stroke: url(#lGd);
                        stroke-width: 3;
                        stroke-dasharray: 3;
                        transform-origin: 50%;
                        animation-delay: 0s;
                        animation: change 8s linear infinite;
                }
                .rect:nth-child(even) { animation-delay: -1s; }
                @keyframes change {
                        to { transform: rotate(360deg); }
                }
        </style>
</svg>
</p>
<p><br></p>
<p>代码：</p>
<div class="hE"><pre id="pre1"></pre></div>

<script>
var sc = document.createElement('script'), msvg = document.querySelector('svg');
pre1.textContent = msvg.outerHTML;
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);

</script>

马黑黑 发表于 2024-10-2 10:53

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）等等在内的属性。

红影 发表于 2024-10-2 11:03

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

马黑黑 发表于 2024-10-2 11:07

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

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

红影 发表于 2024-10-2 11:08

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

马黑黑 发表于 2024-10-2 11:11

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

偶数提前运行1秒的结果

红影 发表于 2024-10-2 11:11

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

梦江南 发表于 2024-10-2 11:40

老师的肚里都 是代码哈！{:4_187:}

马黑黑 发表于 2024-10-2 11:53

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

{:4_203:}

红影 发表于 2024-10-2 13:50

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

哦哦，知道了。谢谢黑黑{:4_187:}

红影 发表于 2024-10-2 13:51

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

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

马黑黑 发表于 2024-10-2 13:58

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

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

红影 发表于 2024-10-2 14:29

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

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

花飞飞 发表于 2024-10-2 15:37

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

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

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

对。

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

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

是的

花飞飞 发表于 2024-10-2 18:31

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

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

马黑黑 发表于 2024-10-2 21:13

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

{:4_190:}

红影 发表于 2024-10-2 22:06

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

真奇妙。
页: [1]
查看完整版本: CSS驱动svg动画演示