樣式教程|創(chuàng)意SVG滑動(dòng)點(diǎn)擊樣式
互動(dòng)性再上一級(jí)，不僅可以滑動(dòng)，還可以點(diǎn)擊哦~
嘿，胖友們大家好呀，我是三兒。
明天就到教師節(jié)了，胖友們準(zhǔn)備好教師節(jié)的推文了嗎？這次三兒可長(zhǎng)了記性，提前一天來(lái)給你們準(zhǔn)備了推文教程，是不是超級(jí)貼心哇！
先來(lái)看看我們本期的SVG樣式是什么效果吧。
溫馨提示：最后一張圖片可以點(diǎn)擊喲！
怎么樣，這個(gè)滑動(dòng)樣式是不是有點(diǎn)不一樣？之前的滑動(dòng)樣式就只能滑動(dòng)，這個(gè)滑動(dòng)完成以后還能進(jìn)行點(diǎn)擊，是不是和用戶的互動(dòng)性又上了一個(gè)臺(tái)階？
今天，三兒就來(lái)教大家如何使用吧！
話不多說(shuō)，教程開(kāi)始！
滑動(dòng)點(diǎn)擊樣式
ID:99921
【樣式作用】：創(chuàng)意SVG，可以與讀者進(jìn)行有效的互動(dòng)，幫助打造文章氛圍。除此之外，還可以結(jié)合產(chǎn)品特性，制作出更多的玩法。
【使用說(shuō)明】：如需要替換圖片，請(qǐng)?jiān)趯I(yè)版用動(dòng)畫(huà)功能，需要使用同步功能同步至微信公眾號(hào)。
一、如何更換內(nèi)容？
135編輯器對(duì)SVG樣式做了更新，在專業(yè)版中特意添加了『動(dòng)畫(huà)』按鈕，胖友們可以在『動(dòng)畫(huà)』設(shè)置中對(duì)SVG樣式進(jìn)行修改。
1.首先將編輯器切換至專業(yè)版，點(diǎn)擊右側(cè)『更多功能』，在彈出的菜單中選擇『切換專業(yè)版』，即可將編輯器切換為專業(yè)版。
2.搜索樣式ID：99921，找到『滑動(dòng)點(diǎn)擊』樣式，插入至編輯器中。
3.點(diǎn)擊選中樣式（在樣式周圍出現(xiàn)虛線框時(shí)，才算選中哦?。?，在彈出的菜單欄中，選擇『動(dòng)畫(huà)』按鈕，進(jìn)入動(dòng)畫(huà)設(shè)置界面。
這里需要注意的是：只有SVG樣式才會(huì)有動(dòng)畫(huà)按鈕哦，普通的樣式是沒(méi)有動(dòng)畫(huà)按鈕的！
4.在動(dòng)畫(huà)設(shè)置界面，我們就可以對(duì)樣式內(nèi)的圖片進(jìn)行更換了，胖友們可以選擇『圖片上傳』按鈕對(duì)圖片進(jìn)行替換。
這里需要注意的是：胖友們?cè)谥谱鲌D片時(shí)，三張圖片的尺寸需要保持一致，否則會(huì)導(dǎo)致樣式顯示出現(xiàn)問(wèn)題哦！
5.設(shè)置完所有內(nèi)容以后，胖友們可以在右側(cè)的預(yù)覽框中進(jìn)行測(cè)試，也可以返回編輯器界面，點(diǎn)擊右側(cè)菜單欄中的『手機(jī)預(yù)覽』進(jìn)行測(cè)試。
注意事項(xiàng)：
這里需要注意的是，由于微信后臺(tái)限制，所以排版完成后的推文需要使用保存同步功能，如果使用復(fù)制粘貼會(huì)導(dǎo)致樣式失效哦！
二、視頻版教程
三兒還為你們錄制了一段視頻版的教程，胖友們可以結(jié)合視頻版的內(nèi)容進(jìn)行操作哦！
好啦，今天的教程就到這里啦
胖友們學(xué)會(huì)了嗎？
·END·
如果你還有關(guān)于其它樣式的疑問(wèn)
可以在135筆記中看看樣式教程哦
■ ■ ■ ■
立即登錄
- 【135早資訊】：視頻號(hào)小任務(wù)正式上線；拼多多將上線跨境電商平臺(tái)
- 【135早資訊】：特斯拉上海超級(jí)工廠第100萬(wàn)輛整車下線；?微信聊天對(duì)話框支持放大編輯
- 【135早資訊】：北京發(fā)布國(guó)內(nèi)首個(gè)數(shù)字人產(chǎn)業(yè)專項(xiàng)支持政策；元宇宙招聘潮開(kāi)啟
- 【135早資訊】：平安銀行零售條線降薪；蔚來(lái)李斌回應(yīng)手機(jī)業(yè)務(wù)傳聞
