玩轉夏日推文！SVG“抽拉卡片”效果這么用超吸睛 | 教程
夏日推文必備的SVG“抽拉卡片”效果來襲！從寶詩龍、廣州柏悅酒店到135平臺玩法全解析，更有制作教程、應用場景、素材規(guī)范一網打盡，輕松讓推文互動感翻倍！
救命！這屆打工人被太陽"烤"到變形
每天通勤像行走的羊肉串
急需冰闊落+開盲盒雙倍快樂續(xù)命！
想要快速降溫
除了空調
還有抽到「?？ā沟目鞓?/span>
能讓人感到涼爽
說到抽卡
最近不少品牌愛上了「卡片抽拉」交互
交互強、效果棒
我們一起來看看吧
互斥抽拉卡片，我們可以在哪些場景下使用呢？
一.作品（產品）介紹：如美術作品、商品細節(jié)、人物介紹等。
二.年度總結：每張卡片上是每季度（每月）重點工作成效展示。
三.趣味卡片：可以是抽「?？ā购陀脩艋?/span>
四.文案分享：文案摘抄、詩歌分享也可以用卡片呈現(xiàn)
.....
一.進入SVG編輯器
二.搜索組件
在SVG編輯器左側選擇「SVG效果」在搜索框中搜索：點擊豎向抽取圖片（無限） ID：1029
三.點擊組件進入編輯區(qū)
單擊組件添加進編輯區(qū)中
四.確認素材要求
在制作效果前，我們需要先確認上傳素材符合效果素材要求，避免出現(xiàn)素材不符合組件要求導致效果失效的情況。
本篇效果要求為：
01.背景圖與頂層圖寬高一致
02.抽取卡片尺寸可以不與背景圖一致但建議一致
03.建議抽取卡片數量少于6張
04.由于整個卡片皆為觸發(fā)區(qū)，卡片四周制作時應減少透明鏤空區(qū)域
五.素材圖展示
頂層圖
1080*1720
背景圖
1080*1720
卡片1
1080*1720
卡片2
1080*1720
卡片3
1080*1720
六.按要求上傳素材圖
按照「背景圖」「頂層圖」「彈出圖」分別上傳對應的素材圖。同時發(fā)現(xiàn)卡片底部露出區(qū)域過多，我們想要頂層圖遮擋卡片部分內容，這時候需要手動調整彈出卡片的位置。
未調整卡片位置
調整居中距離為50%，效果還是很明顯的吧。除此之外我們還可以調整卡片的旋轉角度、彈出動畫時長等。
七.導出與同步
制作完成后，我們可以同步到公眾號后臺（需要先給135授權公眾號）或是使用插件同步后臺（無需授權公眾號）
如果我們只是在SVG編輯器里制作的部分效果，還需要在135編輯器中繼續(xù)完成，可使用「導出」將內容導出到135編輯器后繼續(xù)完成內容。
以上就是我們本期
無限抽拉卡片的全部教程
相信聰明的你已經學會了吧
大家還有什么想看想學的
記得在評論區(qū)告訴我哦
立即登錄
