• 视频教程
  • 秒刷功能
  • 编辑器快捷键
  • 关注按钮
  • 添加背景图
  • 弹幕文字修改增删
  • 时间轴增加节点
  • DIY收藏,一键套用
  • 图片快传
  • 二维码
  • 导入公众号
帮助中心首页 特殊样式使用教程 微信图文排版中,点击图片播放音乐的动画效果如何制作?

微信图文排版中,点击图片播放音乐的动画效果如何制作?

浏览量:7784 发布时间:2021-02-22 15:19:44

微信图文排版中,点击图片去除模糊特效并且播放音乐的图文动画效果如何制作?你还差一个样式,样式ID:53610

1.gif

(点击可播放样式最终展示效果)

接下来本文将从上传本地音频添加线上音乐两个方面进行讲述样式动画效果的制作过程,注意,本文需要代码操作,所以小伙伴一定要做好心里准备哦!

需要使用本地音频的小伙伴可参考方法一,直接使用线上音乐的小伙伴可以参考方法二;

方法一:上传本地音频

1、首先在浏览器中登录微信公众号,点击创作管理-多媒体素材进行添加音频;

2.png

(点击可查看大图)

2、从本地选择音频上传,并填写音频的相关信息,点击保存即可;

3.png

(点击可查看大图)

3、在微信公众号后台,点击左侧导航栏的图文素材,添加新的创作;

4.png

(点击可查看大图)

4、将光标定位在文中,选择添加音频;

5.png

(点击可查看大图)

5、在跳出的弹窗中选择素材库,选中刚才上传的本地音频,点击确定;

6.png

(点击可查看大图)

6、按键盘的F12进入代码界面,点击图中的箭头图片按钮,将鼠标选中音频,会出现相对应的代码;

7.png

(点击可查看大图)

7、鼠标右键点击标记的代码,选择Copy-Copy element进行复制代码;

8.png

(点击可查看大图)

8、新建一个TXT文件,将复制的代码进行粘贴在文档里,并将选中的代码删除,

9.png

(点击可查看大图)

9、打开小蚂蚁编辑器,新建一篇文章,将样式53610写入到编辑区,点击图片,再点击样式工具条右侧的svg按钮;

10.png

(点击图片可查看大图)

10、在弹窗中找到替换代码输入区,并粘贴刚才复制的代码,完成之后点击确定;

11.png

(点击图片可查看大图)

11、点击右侧功能按钮进行复制或者同步到公众号;

12.png

(点击可查看大图)

12、在微信公众号后台编辑的文章中粘贴过来样式,点击保存并在手机上进行预览;

13.png

(点击可查看大图)

13、手机的预览效果如下图,点击图片即可触发动画效果,图片由模糊变清晰,并且开始播放音乐,以上就是给样式添加本地音频的所有步骤了!

14.gif

(点击可播放展示效果)

方法二、添加线上音乐

相对本地上传音频,线上音乐的操作过程会简单一些;本地音频比线上音乐多了一个需要删减代码的过程,其他过程都是一样的,接下来一起来看一下如何给样式添加线上音乐!

1、首先打开微信公众号的后台新建一篇文章,将光标定位在文中,选择添加音频;

14.png

(点击可查看大图)

2、在跳出的弹窗中选择音乐,并输入歌手名字或者歌曲名字进行搜索,选中想要添加的歌曲,点击确定;

15.png

(点击可查看大图)

3、按键盘的F12进入代码界面,点击图中的箭头图片按钮,将鼠标选中音频,会出现相对应的代码;

16.png

(点击可查看大图)

4、鼠标右键点击标记的代码,选择Copy-Copy element进行复制代码;

17.png

(点击可查看大图)

5、打开小蚂蚁编辑器,新建一篇文章,将样式53610写入到编辑区,并点击顶部工具栏的HTML按钮切换到代码模式;

18.png

(点击可查看大图)

6、代码内标注有替换音频的语句,将选中的代码删除,并粘贴刚才复制的代码,完成之后再次点击HTML按钮,退出代码模式;

19.png

(点击可查看大图)

7、点击右侧的功能按钮进行复制样式;

20.png

(点击可查看大图)

8、在微信公众号后台编辑的文章中粘贴样式,点击保存并在手机上进行预览;

21.png

(点击可查看大图)

9、手机的预览效果如下图,以上就是给样式添加线上音乐的所有步骤了!你学会了吗?

22.gif

(点击可播放展示效果)

样式53610添加音频的两种方法已经介绍完了!各位小伙伴可以根据自己的需求选择相对应的方法进行操作!

如果以上教程还未能解决你的疑惑,可以添加小蚂蚁客服微信【xmyeditor01】进行咨询哦~~


  • 微信在线客服

    请提供详细的截图大图+文字说明您的问题

    微信:xmyeditor2021

  • 微信扫码查看帮助

    扫码关注,获取各种排版小技巧,黑科技!

复制成功

扫码查看帮助