樣式教程|創(chuàng)意SVG滑動點擊樣式
互動性再上一級,不僅可以滑動,還可以點擊哦~
嘿,胖友們大家好呀,我是三兒。
明天就到教師節(jié)了,胖友們準(zhǔn)備好教師節(jié)的推文了嗎?這次三兒可長了記性,提前一天來給你們準(zhǔn)備了推文教程,是不是超級貼心哇!
先來看看我們本期的SVG樣式是什么效果吧。
溫馨提示:最后一張圖片可以點擊喲!
怎么樣,這個滑動樣式是不是有點不一樣?之前的滑動樣式就只能滑動,這個滑動完成以后還能進行點擊,是不是和用戶的互動性又上了一個臺階?
今天,三兒就來教大家如何使用吧!
話不多說,教程開始!
滑動點擊樣式
ID:99921
【樣式作用】:創(chuàng)意SVG,可以與讀者進行有效的互動,幫助打造文章氛圍。除此之外,還可以結(jié)合產(chǎn)品特性,制作出更多的玩法。
【使用說明】:如需要替換圖片,請在專業(yè)版用動畫功能,需要使用同步功能同步至微信公眾號。
一、如何更換內(nèi)容?
135編輯器對SVG樣式做了更新,在專業(yè)版中特意添加了『動畫』按鈕,胖友們可以在『動畫』設(shè)置中對SVG樣式進行修改。
1.首先將編輯器切換至專業(yè)版,點擊右側(cè)『更多功能』,在彈出的菜單中選擇『切換專業(yè)版』,即可將編輯器切換為專業(yè)版。
2.搜索樣式ID:99921,找到『滑動點擊』樣式,插入至編輯器中。
3.點擊選中樣式(在樣式周圍出現(xiàn)虛線框時,才算選中哦?。?,在彈出的菜單欄中,選擇『動畫』按鈕,進入動畫設(shè)置界面。
這里需要注意的是:只有SVG樣式才會有動畫按鈕哦,普通的樣式是沒有動畫按鈕的!
4.在動畫設(shè)置界面,我們就可以對樣式內(nèi)的圖片進行更換了,胖友們可以選擇『圖片上傳』按鈕對圖片進行替換。
這里需要注意的是:胖友們在制作圖片時,三張圖片的尺寸需要保持一致,否則會導(dǎo)致樣式顯示出現(xiàn)問題哦!
5.設(shè)置完所有內(nèi)容以后,胖友們可以在右側(cè)的預(yù)覽框中進行測試,也可以返回編輯器界面,點擊右側(cè)菜單欄中的『手機預(yù)覽』進行測試。
注意事項:

這里需要注意的是,由于微信后臺限制,所以排版完成后的推文需要使用保存同步功能,如果使用復(fù)制粘貼會導(dǎo)致樣式失效哦!
二、視頻版教程
三兒還為你們錄制了一段視頻版的教程,胖友們可以結(jié)合視頻版的內(nèi)容進行操作哦!

好啦,今天的教程就到這里啦
胖友們學(xué)會了嗎?
·END·
如果你還有關(guān)于其它樣式的疑問
可以在135筆記中看看樣式教程哦
■ ■ ■ ■
立即登錄

- 【135早資訊】:視頻號小任務(wù)正式上線;拼多多將上線跨境電商平臺
- 【135早資訊】:特斯拉上海超級工廠第100萬輛整車下線;?微信聊天對話框支持放大編輯
- 【135早資訊】:北京發(fā)布國內(nèi)首個數(shù)字人產(chǎn)業(yè)專項支持政策;元宇宙招聘潮開啟
- 【135早資訊】:平安銀行零售條線降薪;蔚來李斌回應(yīng)手機業(yè)務(wù)傳聞













