在项目中使用svg做了背景边框,需要加一点小的装饰效果,就是一些小的色块闪烁,让背景看起来不那么死板。 效果比较简单。考虑直接加在svg文件里。
给svg加动画有3种方式
- 用javascript
- 用css animation
- 用svg animation
使用 www.svgator.com/ 可以把svg中的每条路径作为对象,单独设置动画,确实是很方便的方式。
导出时可用选择用javascript还是css实现动画。
第3种方式是用svg animation. 这个闪烁效果比较简单。那么加一句代码就可以
增加闪烁以前的色块部分:
<path class="cls-5" d="M326.51,29.57h54.05v4H326.51Z"/>
在里面加一个动画效果,控制不透明度变化。
<path class="cls-5" d="M326.51,29.57h54.05v4H326.51Z">
<animate attributeName="fill-opacity" values="1;1;0;1" dur="3s" repeatCount="indefinite" />
</path>
最后效果如下: