玩转夏日推文！SVG“抽拉卡片”效果这么用超吸睛 | 教程
夏日推文必备的SVG“抽拉卡片”效果来袭！从宝诗龙、广州柏悦酒店到135平台玩法全解析，更有制作教程、应用场景、素材规范一网打尽，轻松让推文互动感翻倍！
救命！这届打工人被太阳"烤"到变形
每天通勤像行走的羊肉串
急需冰阔落+开盲盒双倍快乐续命！
想要快速降温
除了空调
还有抽到「福卡」的快乐
能让人感到凉爽
说到抽卡
最近不少品牌爱上了「卡片抽拉」交互
交互强、效果棒
我们一起来看看吧
互斥抽拉卡片，我们可以在哪些场景下使用呢？
一.作品（产品）介绍：如美术作品、商品细节、人物介绍等。
二.年度总结：每张卡片上是每季度（每月）重点工作成效展示。
三.趣味卡片：可以是抽「福卡」和用户互动
四.文案分享：文案摘抄、诗歌分享也可以用卡片呈现
.....
一.进入SVG编辑器
二.搜索组件
在SVG编辑器左侧选择「SVG效果」在搜索框中搜索：点击竖向抽取图片（无限） ID：1029
三.点击组件进入编辑区
单击组件添加进编辑区中
四.确认素材要求
在制作效果前，我们需要先确认上传素材符合效果素材要求，避免出现素材不符合组件要求导致效果失效的情况。
本篇效果要求为：
01.背景图与顶层图宽高一致
02.抽取卡片尺寸可以不与背景图一致但建议一致
03.建议抽取卡片数量少于6张
04.由于整个卡片皆为触发区，卡片四周制作时应减少透明镂空区域
五.素材图展示
顶层图
1080*1720
背景图
1080*1720
卡片1
1080*1720
卡片2
1080*1720
卡片3
1080*1720
六.按要求上传素材图
按照「背景图」「顶层图」「弹出图」分别上传对应的素材图。同时发现卡片底部露出区域过多，我们想要顶层图遮挡卡片部分内容，这时候需要手动调整弹出卡片的位置。
未调整卡片位置
调整居中距离为50%，效果还是很明显的吧。除此之外我们还可以调整卡片的旋转角度、弹出动画时长等。
七.导出与同步
制作完成后，我们可以同步到公众号后台（需要先给135授权公众号）或是使用插件同步后台（无需授权公众号）
如果我们只是在SVG编辑器里制作的部分效果，还需要在135编辑器中继续完成，可使用「导出」将内容导出到135编辑器后继续完成内容。
以上就是我们本期
无限抽拉卡片的全部教程
相信聪明的你已经学会了吧
大家还有什么想看想学的
记得在评论区告诉我哦
立即登录
