SVG九宫格制作小技巧(效果超级棒)

胖友们大家好呀,我是三儿,昨天下午技术小哥哥出了一个超棒的svg,教程不马上安排上我简直睡不着觉!

image.png


这个样式是啥样的呢?点击下方查看👇


强烈建议手机查看


是不是感觉很有意思啊?点击不同的方格,就弹出不一样的图片,很有一种拆盲盒的感觉哇!想不想学?


想!


好的,我教你!




点A见B样式

ID:101194



【样式作用】:创意SVG,可以与读者进行有效的互动,帮助打造文章氛围。除此之外,还可以结合产品特性,制作出更多的玩法。


【使用说明】:如需要替换图片,请在专业版用动画功能,需要使用同步功能同步至微信公众号。




一、如何更换内容?

 
 


135编辑器对SVG样式做了更新,在专业版中特意添加了『动画』按钮,胖友们可以在『动画』设置中对SVG样式进行修改。








1.首先将编辑器切换至专业版,点击右侧『更多功能』,在弹出的菜单中选择『切换专业版』,即可将编辑器切换为专业版。










2.搜索样式ID:101194,找到『点A见B样式样式,插入至编辑器中。










3.点击选中样式(在样式周围出现虚线框时,才算选中哦!),在弹出的菜单栏中,选择『动画』按钮,进入动画设置界面。



这里需要注意的是:只有SVG样式才会有动画按钮哦,普通的样式是没有动画按钮的!










4.在动画设置界面,点击『图片上传』,按照顺序依次上传图片即可。









5.设置完所有内容以后,胖友们可以点击右侧菜单栏中的『手机预览』进行测试,因为该样式效果仅支持手机查看。




注意事项:


这里需要注意的是,由于微信后台限制,所以排版完成后的推文需要使用保存同步功能,如果使用复制粘贴会导致样式失效!





二、视频版教程

 
 


三儿还为你们录制了一段视频版的教程,胖友们可以结合视频版的内容进行操作!





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

胖友们学会了吗?


如果你还有关于其它样式的疑问

可以留言告诉三儿



·EN

文章排版由135编辑器提供技术支持

 ■ ■ 





不看后悔


01

投稿模板|投稿赚钱必须注意这5点!

02

排版分析|欢乐谷也太会排版了吧!

03

模板推荐|这10个模板真的超好看!

文章评价
登录后可以评论
立即登录
分享到