![42ab882250bd0522c91c1dfb6860ebad.png](https://i-blog.csdnimg.cn/blog_migrate/4c15887ea1082ff24227e23e3be1e364.jpeg)
胖友们大家好呀,我是三儿。
又到了svg样式教学时间了,今天要教大家的样式是点击消失图片,样式效果如下图:
![bfadca92b4ff5aae4e6b235216c90fc1.gif](https://i-blog.csdnimg.cn/blog_migrate/55e6147000aa4cd87c931fb543f92538.gif)
ok,话不多说,直接上干货!
一、样式介绍
点击消失图片 ID:100884
【样式作用】:创意SVG,可以与读者进行有效的互动,帮助打造文章氛围。除此之外,还可以结合产品特性,制作出更多的玩法。
【使用说明】:如需要替换图片,请在专业版用动画功能,需要使用同步功能同步至微信公众号。
二、如何更换内容?
135编辑器对SVG样式做了更新,在专业版中特意添加了『动画』按钮,胖友们可以在『动画』设置中对SVG样式进行修改。
1.首先将编辑器切换至专业版,点击右侧『更多功能』,在弹出的菜单中选择『切换专业版』,即可将编辑器切换为专业版。
![082ec4b83470f41f24095f9004dd4c52.png](https://i-blog.csdnimg.cn/blog_migrate/0cc4ae9a729d1984f16c30d5ec95a7e8.jpeg)
2.搜索样式ID:100884,找到『svg点击消失图片』样式,插入至编辑器中。
![e0b00c1f5a284655c3db6175c30653cd.png](https://i-blog.csdnimg.cn/blog_migrate/389559e4a6c5fcda49a2f1d8e5ed9a10.jpeg)
3.点击选中样式(在样式周围出现虚线框时,才算选中哦!),在弹出的菜单栏中,选择『动画』按钮,进入动画设置界面。
![64b9e686631b27976d17e18463e7f74a.png](https://i-blog.csdnimg.cn/blog_migrate/3ae034f6a0028c3477accc642a2d91d1.jpeg)
这里需要注意的是:只有SVG样式才会有动画按钮哦,普通的样式是没有动画按钮的!
4.在动画设置界面,点击『图片上传』,上传图片即可。
![459477df022cd5c3d430250bff7563ba.png](https://i-blog.csdnimg.cn/blog_migrate/4b8519b783524f048cd28e06ecf8f679.jpeg)
注意:
① 图片上传顺序为纵列依次上传。
② 图片默认为9张,大家可以删除或者复制,增加图片的张数。
![58b0116c94c15066cbac1258cc5b613b.png](https://i-blog.csdnimg.cn/blog_migrate/453553e3296ffb7be53dd6c91069d838.jpeg)
5.图片上传时,推荐选择原图上传,就可以将做好的图片完整的上传了!
![43e3f9539a30405494e0cd372ae07906.png](https://i-blog.csdnimg.cn/blog_migrate/337971c95c0db8b9ce3ea5d9ad987f26.jpeg)
6.设置完所有内容以后,胖友们可以在svg设置页面右侧的预览框中进行测试,也可以返回编辑器界面,点击右侧菜单栏中的『手机预览』进行测试。
![47955e875b04a5b170da33daed7e387d.png](https://i-blog.csdnimg.cn/blog_migrate/c7e9a214fd2c870011f609e2de3451c5.jpeg)
注意:编辑好后,不要在编辑界面点击该svg图片,直接手机预览查看即可,不然图片消失;由于微信后台限制,所以排版完成后的推文需要使用保存同步功能,如果使用复制粘贴会导致样式失效!
三、视频版教程
三儿还为你们录制了一段视频版的教程,胖友们可以结合视频版的内容进行操作!
知乎视频www.zhihu.com好啦,今天的教程就到这里,胖友们学会了吗?
如果你还有关于其它样式的疑问,可以在评论区告诉三儿,也别忘了给三儿点赞哟~
更多排版技巧&公众号运营知识&课程推荐&涨粉服务,请关注 @135编辑器 ,邀请好友注册即可获得7天编辑器会员~
邀请好友领标准会员-135编辑器www.135editor.com![a71547704395b6520f7c7e5cbff1741c.png](https://i-blog.csdnimg.cn/blog_migrate/f4040be33d26e1c216dbcd1aab0d9594.png)