朋友们大家好啊，我是三儿。

大家还记得自己初次接触svg交互效果是哪一个吗？我想不少朋友会说：点击展开

没错点击展开颇有点“聚是一团火，散是满天星”的感觉，向你展示的只有一小块，但点开后内藏乾坤。

时过境迁，点击展开也发生了不少变化。（什么？你该不会还以为点击展开就仅仅是点击展开吧），大人，时代变了！

今天三儿就和你好好说道说道，有关点击展开的事儿👇

注意⚠️：本文介绍的皆是svg组件，需要在svg编辑器中搜索使用。

svg编辑器网址：

https://www.135editor.com/svgeditor/

#点击直接展开（自定义触发）组件ID：57

这个效果奶茶🥤饮品类公众号最喜欢使用，我们以@茶百道为例就像这样👇

点击直接展开看似简单，却印证了“高端食材往往只需要简单的烹饪”，点击直接展开更考验大家的绘图制图水平，很多行家里手将图做的就像运用了效果，达到了“以假乱真”的奇效，点击直接展开诠释了什么叫【平平淡淡才是真但又不甘于平淡】的真谛。

注意⚠️：之前有不少朋友问我：三儿，有什么办法能实现进入文章自动播放音频呢？

很遗憾，因为微信官方担心用户手机流量流失等问题，不允许音频自动播放。故所有的音频播放都需要一个【点击】的触发条件，那么在点击展开中嵌入音频，是不是能让用户【润物细无声】触发音频，实现【无感播放】的效果呢？

#点击展开同时播放qq音乐（自定义触发）组件ID：228

#同样的一套图，但是加了一个bgm感觉立马就不同了，这里我们需要注意的是，我们使用的是【QQ音乐】所以本地音频无法插入使用（如果想要使用自己的音频，可以用组件点击展开同时播放音频-自定义触发 组件ID：109）

如何获取音频代码？

01.在微信后台新建一篇文章插入qq音乐后保存文章

02.在微信公众号后台点击文章标题，进入文章临时预览界面，复制文章链接🔗

03.在svg编辑器页面，将刚刚复制的文章链接粘贴到【一键获取代码】组件自动获取音频代码

#此效果适用营造【谜团】需要层层剖析且内容较多的文章，若是直接展开内容太多会显得冗长，多重展开能够人为的分段，巧妙引导读者阅读完文章。

这里我们还是借用茶百道的图为例子👇

注意⚠️：我们在使用各种组件的时候，一点要注意看组件的素材要求，有不少朋友不按规则上传图片出错后，还不知道自己错在哪里了。

当然除了三儿介绍的这三种点击展开，svg编辑器里还有很多有关点击展开的组件，包括但不限于图文依次停顿式展开、点击放大换图展开（自定义触发）......大家可以在svg编辑器的搜索框中搜索关键词【点击展开】就能找到相关组件啦。

以上就是的全部内容了

关于更多排版小技巧

敬请锁定135编辑器