甚至還有兇我的

有求必應(yīng)的三兒今天就來給大家還原一下這篇SVG的制作過程！不要怕學(xué)不會，文末還有詳細(xì)的視頻教程噢~

（ps：沒看過文章的寶戳下面標(biāo)題看原文）

每一個色塊都需要準(zhǔn)備兩張圖片，分別是點(diǎn)擊前的圖，和點(diǎn)擊后的圖。注意每張圖片的寬高尺寸要一致。

點(diǎn)擊前

點(diǎn)擊后

在『互動效果』欄目下的『組合』分類里，下滑找到『基礎(chǔ)布局-一行三列』效果，將其添加到編輯區(qū)域；

將布局的寬度比例設(shè)置為1:1:1；

點(diǎn)擊『編輯基礎(chǔ)布局』按鈕或雙擊編輯區(qū)域的組件，進(jìn)入基礎(chǔ)布局編輯界面。

進(jìn)入基礎(chǔ)布局編輯頁后，在左側(cè)點(diǎn)擊『點(diǎn)擊翻轉(zhuǎn)卡片-自定義觸發(fā)』，分別為每一列布局添加點(diǎn)擊翻轉(zhuǎn)的效果；

接下來，在右側(cè)點(diǎn)擊『添加圖片』按鈕，分別上傳點(diǎn)擊前后的圖片；

上傳好圖片之后，鼠標(biāo)點(diǎn)擊組件，可以設(shè)置觸發(fā)點(diǎn)擊翻轉(zhuǎn)效果的熱區(qū)；

點(diǎn)擊『完成』，回到主編輯界面即可。

如果要做成三兒這種6個色塊的效果，再按以上步驟添加一個『基礎(chǔ)布局-一行三列』布局，添加好素材就可以了。

制作好的SVG文章可以通過使用『同步』或『導(dǎo)出』功能，保存到微信公眾號平臺。

好啦，以上就是今天的全部內(nèi)容啦，想要使用這款SVG組件的胖友們可以升級年費(fèi)超級會員免費(fèi)使用噢！

如果你還不是年費(fèi)超級會員，來三兒的雜貨鋪，花99元就能任選5個你心儀的SVG效果，趕快掃描下方二維碼，帶走它們吧！

看在三兒努力碼教程的份上

來個在看唄~