朋友們大家好啊，我是三兒。

大家還記得自己初次接觸svg交互效果是哪一個(gè)嗎？我想不少朋友會(huì)說(shuō)：點(diǎn)擊展開(kāi)

沒(méi)錯(cuò)點(diǎn)擊展開(kāi)頗有點(diǎn)“聚是一團(tuán)火，散是滿(mǎn)天星”的感覺(jué)，向你展示的只有一小塊，但點(diǎn)開(kāi)后內(nèi)藏乾坤。

時(shí)過(guò)境遷，點(diǎn)擊展開(kāi)也發(fā)生了不少變化。（什么？你該不會(huì)還以為點(diǎn)擊展開(kāi)就僅僅是點(diǎn)擊展開(kāi)吧），大人，時(shí)代變了！

今天三兒就和你好好說(shuō)道說(shuō)道，有關(guān)點(diǎn)擊展開(kāi)的事兒??

注意??：本文介紹的皆是svg組件，需要在svg編輯器中搜索使用。

svg編輯器網(wǎng)址：

http://serialka.com/svgeditor/

#點(diǎn)擊直接展開(kāi)（自定義觸發(fā)）組件ID：57

這個(gè)效果奶茶??飲品類(lèi)公眾號(hào)最喜歡使用，我們以@茶百道為例就像這樣??

點(diǎn)擊直接展開(kāi)看似簡(jiǎn)單，卻印證了“高端食材往往只需要簡(jiǎn)單的烹飪”，點(diǎn)擊直接展開(kāi)更考驗(yàn)大家的繪圖制圖水平，很多行家里手將圖做的就像運(yùn)用了效果，達(dá)到了“以假亂真”的奇效，點(diǎn)擊直接展開(kāi)詮釋了什么叫【平平淡淡才是真但又不甘于平淡】的真諦。

注意??：之前有不少朋友問(wèn)我：三兒，有什么辦法能實(shí)現(xiàn)進(jìn)入文章自動(dòng)播放音頻呢？

很遺憾，因?yàn)槲⑿殴俜綋?dān)心用戶(hù)手機(jī)流量流失等問(wèn)題，不允許音頻自動(dòng)播放。故所有的音頻播放都需要一個(gè)【點(diǎn)擊】的觸發(fā)條件，那么在點(diǎn)擊展開(kāi)中嵌入音頻，是不是能讓用戶(hù)【潤(rùn)物細(xì)無(wú)聲】觸發(fā)音頻，實(shí)現(xiàn)【無(wú)感播放】的效果呢？

#點(diǎn)擊展開(kāi)同時(shí)播放qq音樂(lè)（自定義觸發(fā)）組件ID：228

#同樣的一套圖，但是加了一個(gè)bgm感覺(jué)立馬就不同了，這里我們需要注意的是，我們使用的是【QQ音樂(lè)】所以本地音頻無(wú)法插入使用（如果想要使用自己的音頻，可以用組件點(diǎn)擊展開(kāi)同時(shí)播放音頻-自定義觸發(fā) 組件ID：109）

如何獲取音頻代碼？

01.在微信后臺(tái)新建一篇文章插入qq音樂(lè)后保存文章

02.在微信公眾號(hào)后臺(tái)點(diǎn)擊文章標(biāo)題，進(jìn)入文章臨時(shí)預(yù)覽界面，復(fù)制文章鏈接??

03.在svg編輯器頁(yè)面，將剛剛復(fù)制的文章鏈接粘貼到【一鍵獲取代碼】組件自動(dòng)獲取音頻代碼

#此效果適用營(yíng)造【謎團(tuán)】需要層層剖析且內(nèi)容較多的文章，若是直接展開(kāi)內(nèi)容太多會(huì)顯得冗長(zhǎng)，多重展開(kāi)能夠人為的分段，巧妙引導(dǎo)讀者閱讀完文章。

這里我們還是借用茶百道的圖為例子??

注意??：我們?cè)谑褂酶鞣N組件的時(shí)候，一點(diǎn)要注意看組件的素材要求，有不少朋友不按規(guī)則上傳圖片出錯(cuò)后，還不知道自己錯(cuò)在哪里了。

當(dāng)然除了三兒介紹的這三種點(diǎn)擊展開(kāi)，svg編輯器里還有很多有關(guān)點(diǎn)擊展開(kāi)的組件，包括但不限于圖文依次停頓式展開(kāi)、點(diǎn)擊放大換圖展開(kāi)（自定義觸發(fā)）......大家可以在svg編輯器的搜索框中搜索關(guān)鍵詞【點(diǎn)擊展開(kāi)】就能找到相關(guān)組件啦。

以上就是的全部?jī)?nèi)容了

關(guān)于更多排版小技巧

敬請(qǐng)鎖定135編輯器