SVG點(diǎn)擊樣式教程來啦

創(chuàng)意SVG點(diǎn)擊樣式,一直點(diǎn)擊的效果特別有意思!

嘿,胖友們大家好呀,我是三兒。


自從上次推了六周年活動預(yù)告以后,每天都有胖友追著三兒問:啥時(shí)候出教程啊,啥時(shí)候出教程啊,趕快出教程吧!


別催了別催了,教程來了!


先來給沒看過的胖友們看看效果吧?。槺阍俅騻€(gè)廣告)


       
                                                                                       mua~                                                                                                               愛你們~                                                                                                                                  生日快樂呀!                                                                                                                                 快來祝135編輯器                                                                                                                                  千萬不要錯(cuò)過哦!                                                                                                                                 記得調(diào)好鬧鐘哦                                                                                                                                  機(jī)不可失 失不再來                                                                                                                                  運(yùn)營指南工具最低免費(fèi)送                                                                                                                                  還有11城聯(lián)動面基會                                                                                                                                  對了對了                                                                                                                                  前10名獲贈終身年卡權(quán)益                                                                                                                                  135課堂年卡買就送                                                                                                                                  我們將開展6周年活動                                                                                                                                  9月1日起                                                                                                                                  可別怪我沒提醒大家啊                                                                                                                                  自然福利也不會少                                                                                                                                  既然6周年都快來了                                                                                                                                  風(fēng)雨同舟,一路相隨                                                                                                                                  感謝大家這6年來                                                                                                                                  2014—2020                                                                                                                                  135編輯器6歲啦!                                                             (點(diǎn)擊繼續(xù))                                                                        
   

怎么樣,一直點(diǎn)擊的效果是不是特別有意思!


今天,三兒就來教大家如何使用吧!


話不多說,教程開始!



點(diǎn)擊切換樣式

ID:91578


【樣式作用】:創(chuàng)意SVG,可以與讀者進(jìn)行有效的互動,幫助打造文章氛圍。除此之外,還可以結(jié)合產(chǎn)品特性,制作出更多的玩法。


【使用說明】:如需要替換文字,請?jiān)趯I(yè)版用動畫功能,使用同步功能同步至微信公眾號。





一、如何更換內(nèi)容?

 
 


135編輯器對SVG樣式做了更新,在專業(yè)版中特意添加了『動畫』按鈕,胖友們可以在『動畫』設(shè)置中對SVG樣式進(jìn)行修改。








1.首先將編輯器切換至專業(yè)版,點(diǎn)擊右側(cè)『更多功能』,在彈出的菜單中選擇『切換專業(yè)版』,即可將編輯器切換為專業(yè)版。








2.搜索樣式ID:91578,找到『點(diǎn)擊切換』樣式,插入至編輯器中。









3.點(diǎn)擊選中樣式(在樣式周圍出現(xiàn)虛線框時(shí),才算選中哦?。趶棾龅牟藛螜谥?,選擇『動畫』按鈕,進(jìn)入動畫設(shè)置界面。



這里需要注意的是:只有SVG樣式才會有動畫按鈕哦,普通的樣式是沒有動畫按鈕的!










4.在動畫設(shè)置界面,我們就可以對樣式內(nèi)的文字進(jìn)行更換了,胖友們可以在文字編輯區(qū)內(nèi)對文字進(jìn)行替換。



這里需要注意的是:胖友們需要注意文字顯示的先后順序,第一次顯示的內(nèi)容在底部哦!









5.想要增加文字的胖友們注意啦!這個(gè)樣式新增文字需要在HTML代碼界面中進(jìn)行修改,點(diǎn)擊樣式,打開HTML代碼界面,找到『<g>』開頭『</g>』結(jié)尾的代碼,將他們復(fù)制后,粘貼在『<g>』代碼前即可。










6.調(diào)整文字切換的方向也是需要通過修改HTML代碼來實(shí)現(xiàn)。點(diǎn)擊樣式后進(jìn)入到HTML代碼界面,找到每行文字下方『values』代碼,修改里面的數(shù)值即可。


這里需要注意的是:500為向右滑動,-500為向左滑動,胖友們只需要修改正負(fù)數(shù)即可完成左右切換的操作!










7.設(shè)置完所有內(nèi)容以后,胖友們可以在右側(cè)的預(yù)覽框中進(jìn)行測試,也可以返回編輯器界面,點(diǎn)擊右側(cè)菜單欄中的『手機(jī)預(yù)覽』進(jìn)行測試。



注意事項(xiàng):


這里需要注意的是,由于微信后臺限制,所以排版完成后的推文需要使用保存同步功能,如果使用復(fù)制粘貼會導(dǎo)致樣式失效哦!





二、視頻版教程

 
 


三兒還為你們錄制了一段視頻版的教程,胖友們可以結(jié)合視頻版的內(nèi)容進(jìn)行操作哦!





好啦,今天的教程就到這里啦

胖友們學(xué)會了嗎?


如果你還有關(guān)于其它樣式的疑問

都可以在評論區(qū)告訴三兒哦


·EN

還有更多SVG樣式的教程在幫助中心等你哦


【新媒體技能提升】

倒計(jì)時(shí)8天

排版訓(xùn)練營就要開課啦

還沒報(bào)名的快來報(bào)名啦

猛戳??排版訓(xùn)練營

 ■ ■ 


文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權(quán)請聯(lián)系我們刪除
文章評價(jià)
登錄后可以評論
立即登錄
135筆記君資訊官
做你貼心的互聯(lián)網(wǎng)筆記本!
共1059篇文章
最近文章
更多
  • 【135早資訊】:視頻號小任務(wù)正式上線;拼多多將上線跨境電商平臺
  • 【135早資訊】:特斯拉上海超級工廠第100萬輛整車下線;?微信聊天對話框支持放大編輯
  • 【135早資訊】:北京發(fā)布國內(nèi)首個(gè)數(shù)字人產(chǎn)業(yè)專項(xiàng)支持政策;元宇宙招聘潮開啟
  • 【135早資訊】:平安銀行零售條線降薪;蔚來李斌回應(yīng)手機(jī)業(yè)務(wù)傳聞
比格設(shè)計(jì)
熱門工具
135編輯器
領(lǐng)先的在線圖文編輯平臺原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計(jì)
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機(jī)海報(bào)應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營銷、私域流量運(yùn)營——站式營銷管理平臺
推薦文章
用戶運(yùn)營平臺產(chǎn)品設(shè)計(jì)指南
淺談用戶運(yùn)營中的用戶分層
內(nèi)容運(yùn)營:戴上寫作的六頂思考帽
5000字方法論:4個(gè)細(xì)節(jié),決定私域能不能賺錢
一個(gè)案例說明白用戶分析怎么用
22條視頻,漲粉12.6萬,一個(gè)女孩子在抖音靠洗車也能月入過萬!
高價(jià)值社群的5大核心關(guān)鍵
抖音賬號內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問題;抖音6月1日起將對本地生活商家收取服務(wù)費(fèi)
熱門素材樣式
運(yùn)營導(dǎo)航
運(yùn)營工具
分享到