本文共 576 字，大约阅读时间需要 1 分钟。

svg基础+公众号交互(二)

svg基础+公众号交互(二)

欢迎点击: .

话接上回…

上节我们讲了svg基础及简单的动画DEMO及案例，这节我们来讲一些难度更高的svg交互。

效果图已经展示，这个案例完全是由svg实现的，不需要任何css或js代码。

具体实现方式如下：

1.闪烁的文字

点击爆竹放飞梦想

实现思路：通过animate元素控制文本的透明度，循环闪烁效果。

2.烟花上天

效果：烟花上升后变成贺语。实现思路很简单，就是把烟花和贺语放在同一个

B辑说明：

1.烟花可以从阿里矢量图标库下载svg格式的文件，提取其中的path即可

具体实现：烟花和贺语放在同一组内，通过animateTransform动画上移，烟花离开后，贺语逐渐显现，这样看起来就像烟花破裂成贺语一样。

需要注意的是，不同烟花动作代码基本一致，所以可以直接复制粘贴。

在微信公众号中使用

步骤如下：

1.登录微信公众平台2.进入图文管理3.使用开发者工具（通常是F12）打开4.找到图片中的body下的p标签5.将自定义代码复制粘贴即可生效

需要注意的是，这里需要将图片位置设置为svg的位置，不要和其他图片重叠或影响正常展示。

更多案例请关注我哟～👉关注我的公众号获取更多精彩内容！

转载地址：http://tlctz.baihongyu.com/