一學(xué)就會的敲冰塊 SVG 互動推文制作教程
想讓你的推文趣味十足且互動感滿滿？快來學(xué)習(xí)如何打造敲冰塊 SVG 互動推文，通過點(diǎn)擊換圖讓你的內(nèi)容與眾不同，詳細(xì)步驟和技巧一站式呈現(xiàn)，輕松吸引讀者互動，快來探索吧！
上周三兒在135平臺發(fā)了篇推文
（點(diǎn)擊回顧）
不少朋友留言問三兒
這篇效果是怎么做的
大家都知道三兒最寵粉了
喏，快搬好小板凳
今天的三兒小課堂準(zhǔn)備開課啦
該效果從本質(zhì)上來說其實(shí)就是「點(diǎn)擊換圖」，不過以往我們是一行一列單張圖的替換。這次我們是一行多列的「點(diǎn)擊換圖」。若我們使用一行四列布局（ID：350）搭配點(diǎn)擊換圖（ID：4），這種方法自然可以實(shí)現(xiàn)，但這只適合內(nèi)容背景素材偏少的情況，像本文有350個冰塊的情況，使用該方法需要切350個背景圖，費(fèi)時費(fèi)力。還有什么相對簡便一點(diǎn)的方法嗎？有，使用多區(qū)域點(diǎn)擊換圖，具體如何操作？且看下文。
01.進(jìn)入SVG編輯器
在135編輯器左側(cè)找到「SVG編輯」
02.搜索效果組件
在「SVG效果」中搜索組件ID183，找到多區(qū)域點(diǎn)擊換圖。
在使用組件前，我們需要仔細(xì)閱讀素材要求，避免因上傳素材不符要求而導(dǎo)致效果無法實(shí)現(xiàn)。
“背景”
點(diǎn)擊后的圖
點(diǎn)擊前的圖
03.一些“疑點(diǎn)”
如果根據(jù)我們提供的素材上傳，好像無法使用該效果。因?yàn)樗夭囊竺鞔_規(guī)定，「點(diǎn)擊前」與「點(diǎn)擊后」的圖尺寸需保持一致，背景圖可以不做要求。可明眼人都能看出，我們點(diǎn)擊前后的圖尺寸相差甚遠(yuǎn)，如果強(qiáng)行上傳，結(jié)果只會是無法正常使用該效果。
這最后呈現(xiàn)的效果也不對呀，難道是我們操作錯誤？其實(shí)我們只需要換個思路，如果我們把「點(diǎn)擊后的圖」作為背景圖，點(diǎn)擊前的圖還是正常上傳，「點(diǎn)擊后的圖」不上傳，保持為空。我們試想下，觸發(fā)「點(diǎn)擊前的圖」后它消失，是不是就露出了背景？
04.那背景圖咋辦呢？
好問題！我們可以在135編輯器中給全文設(shè)置背景，我們仔細(xì)看「點(diǎn)擊后的圖」中冰塊之間其實(shí)是鏤空的，可以完美露出背景，而其他部分會被原本內(nèi)容遮擋，不用擔(dān)心會穿幫。
05.如何設(shè)置全文背景？
在135編輯器，頂部菜單欄找到「背景」-「背景設(shè)置」-「圖片背景」上傳我們的圖片即可。
06.那其他內(nèi)容我該怎么做呢？
像本文前面所展示的「無縫圖」+「多區(qū)域點(diǎn)擊換圖」+「無縫圖」的組合，其實(shí)就是各個組件的拼湊，所以我們只需在編輯頁前端放置無縫圖即可。
07.如何導(dǎo)出到135編輯器中
排版完成后，我們需要導(dǎo)出到135編輯器給全文添加背景，那么如何導(dǎo)出到135編輯器呢？在svg編輯器右上角找到「導(dǎo)出」選擇「復(fù)制代碼到135編輯器」。
回到135編輯器頁面在頂部左上角找到「HTML」點(diǎn)擊全選代碼后粘貼剛剛復(fù)制的代碼，復(fù)制完成后再點(diǎn)擊「HTML」即可
以上就是三兒分享的全部內(nèi)容了
如果覺得還不錯
記得點(diǎn)贊+在看
如果還有什么想看想學(xué)的
歡迎在評論區(qū)留言哦
還有一件事
成都世運(yùn)會開幕啦
相信這段時間一定有許多新聞
需要排版宣傳
作為成都本土企業(yè)
三兒也想要為咱們世運(yùn)會助力
8月7日——8月17日
新用戶注冊135編輯器后
在「135編輯器」公眾號
后臺回復(fù)
「成都世運(yùn)會雄起」
即可獲得3天標(biāo)準(zhǔn)會員時長
立即登錄
