朋友们大家好，我是三儿。

上周三儿在135平台上发布了一条，点击渐进换色的内容，引来「哇」声一片➡点击查看

点击预设的触发小图标，小图标缓缓下落随着图片的下落本是黑白的图片像是被重新粉刷了一样，变得五彩斑斓还搭配上了文案。

怎么样效果还不错吧，这个效果不少大牌也爱使用，特仑苏在今年的立秋推文中也使用了此效果➡案例查看

那么问题来了，这个效果制作起来麻烦吗？别担心，接下来就是三儿的教学时间。

本次效果相较于之前教学的效果有一点不同，这次新增了一个小元素，我们在制作效果时，一定要先看素材要求，避免因素材问题导致无法实现效果。

在变化前的图，我们有元素是黑白的，这个我们可以在笔格设计里处理，选中「元素」-「滤镜」-「黑白」

我们需要制作初始背景、变换后的背景↓

在我们处理好素材后，就可以进行效果制作了。

在编辑器找到「SVG互动效果」，点击进入SVG编辑器页面，选择「互动效果」在搜索框中搜索「点击元素下移同时展开全文渐进式换内容-自定义触发」或是组件ID：861

我们先添加点击小元素，注意小元素的图需要使用透明底的png图。

透明底的小元素

然后我们按顺序上传初始图及背景图，注意：初始图和变化后的第一张图需要是同一张图。

添加好图后，我们可以设置展开动画 时长以及小元素移入时长。   

我们制作完效果后，如果你微信公众号绑定了135编辑器，我们可以直接使用同步功能，将制作好的内容同步到微信公众号后台中。

如果公众号没有绑定但下载了135插件，也可以通过插件同步到后台中去。

若是想要复制到135编辑器中，也可以选择「导出」复制到135编辑器中。

这样我们就完成了这篇效果的制作。

以上就是本期svg教学的全部内容了

怎么样是不是很简单

只要我们遵守素材要求

发挥自己的想象力

就能完成一篇出色的作品

眼睛看会了

不如动立马动手试试吧