甚至还有凶我的

有求必应的三儿今天就来给大家还原一下这篇SVG的制作过程！不要怕学不会，文末还有详细的视频教程噢~

（ps：没看过文章的宝戳下面标题看原文）

每一个色块都需要准备两张图片，分别是点击前的图，和点击后的图。注意每张图片的宽高尺寸要一致。

点击前

点击后

在『互动效果』栏目下的『组合』分类里，下滑找到『基础布局-一行三列』效果，将其添加到编辑区域；

将布局的宽度比例设置为1:1:1；

点击『编辑基础布局』按钮或双击编辑区域的组件，进入基础布局编辑界面。

进入基础布局编辑页后，在左侧点击『点击翻转卡片-自定义触发』，分别为每一列布局添加点击翻转的效果；

接下来，在右侧点击『添加图片』按钮，分别上传点击前后的图片；

上传好图片之后，鼠标点击组件，可以设置触发点击翻转效果的热区；

点击『完成』，回到主编辑界面即可。

如果要做成三儿这种6个色块的效果，再按以上步骤添加一个『基础布局-一行三列』布局，添加好素材就可以了。

制作好的SVG文章可以通过使用『同步』或『导出』功能，保存到微信公众号平台。

好啦，以上就是今天的全部内容啦，想要使用这款SVG组件的胖友们可以升级年费超级会员免费使用噢！

如果你还不是年费超级会员，来三儿的杂货铺，花99元就能任选5个你心仪的SVG效果，赶快扫描下方二维码，带走它们吧！

看在三儿努力码教程的份上

来个在看呗~