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