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