SVG九宮格制作小技巧(效果超級棒)
胖友們大家好呀,我是三兒,昨天下午技術(shù)小哥哥出了一個(gè)超棒的svg,教程不馬上安排上我簡直睡不著覺!
這個(gè)樣式是啥樣的呢?點(diǎn)擊下方查看??
強(qiáng)烈建議手機(jī)查看
是不是感覺很有意思?。奎c(diǎn)擊不同的方格,就彈出不一樣的圖片,很有一種拆盲盒的感覺哇!想不想學(xué)?
想!
好的,我教你!
點(diǎn)A見B樣式
ID:101194
【樣式作用】:創(chuàng)意SVG,可以與讀者進(jìn)行有效的互動(dòng),幫助打造文章氛圍。除此之外,還可以結(jié)合產(chǎn)品特性,制作出更多的玩法。
【使用說明】:如需要替換圖片,請?jiān)趯I(yè)版用動(dòng)畫功能,需要使用同步功能同步至微信公眾號(hào)。
一、如何更換內(nèi)容?
135編輯器對SVG樣式做了更新,在專業(yè)版中特意添加了『動(dòng)畫』按鈕,胖友們可以在『動(dòng)畫』設(shè)置中對SVG樣式進(jìn)行修改。
1.首先將編輯器切換至專業(yè)版,點(diǎn)擊右側(cè)『更多功能』,在彈出的菜單中選擇『切換專業(yè)版』,即可將編輯器切換為專業(yè)版。
2.搜索樣式ID:101194,找到『點(diǎn)A見B樣式』樣式,插入至編輯器中。
3.點(diǎn)擊選中樣式(在樣式周圍出現(xiàn)虛線框時(shí),才算選中哦?。?,在彈出的菜單欄中,選擇『動(dòng)畫』按鈕,進(jìn)入動(dòng)畫設(shè)置界面。
4.在動(dòng)畫設(shè)置界面,點(diǎn)擊『圖片上傳』,按照順序依次上傳圖片即可。
5.設(shè)置完所有內(nèi)容以后,胖友們可以點(diǎn)擊右側(cè)菜單欄中的『手機(jī)預(yù)覽』進(jìn)行測試,因?yàn)樵摌邮叫Ч麅H支持手機(jī)查看。
注意事項(xiàng):
這里需要注意的是,由于微信后臺(tái)限制,所以排版完成后的推文需要使用保存同步功能,如果使用復(fù)制粘貼會(huì)導(dǎo)致樣式失效!
二、視頻版教程
三兒還為你們錄制了一段視頻版的教程,胖友們可以結(jié)合視頻版的內(nèi)容進(jìn)行操作!
好啦,今天的教程就到這里
胖友們學(xué)會(huì)了嗎?
如果你還有關(guān)于其它樣式的疑問
可以留言告訴三兒
·END·
文章排版由135編輯器提供技術(shù)支持
■ ■ ■ ■
不看后悔
立即登錄
- 雙十二電商活動(dòng)宣傳排版素材(電商商品促銷推廣模版樣式)
- 乞巧節(jié)微信公眾號(hào)推文排版素材(愛情浪漫活動(dòng)推廣文案)
- 二十四節(jié)氣立秋圖文排版素材(金黃色系立秋推文文案模版)
- 八一建軍節(jié)紀(jì)念日推文排版樣式(光輝歷程文案宣傳模版)