还在花钱制作SVG吗?(SVG制作小技巧)

胖友们大家好呀,我是三儿,胖友们绝对想不到吧,一张图居然可以点不同的位置,弹出不同的图片!


image.png


这也太神奇了吧?是不是需要定制?完全不用!


这是新上的svg样式,超级简单就能实现这样炫酷的操作哦!




话题猜谜,互动型推文都可以用到这个样式哦!接下来就跟着三儿一起来学习下吧!




单图三个触发点弹出图片

ID:101417



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


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




一、如何更换内容?

 
 


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








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








2.搜索样式ID:101417,找到『svg单图三个触发点弹出图片样式,插入至编辑器中。







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



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









4.在动画设置界面,点击『图片上传』,分别上传隐藏的三张图片和一张背景图即可。









5.设置完所有内容以后,点击右侧菜单栏中的『手机预览』进行测试。


注意:SVG样式仅支持手机预览!



二、如何修改图片位置?

 
 


三张隐藏点击就弹出的图片位置怎么调整呢?这就要通过调整源代码才能实现了!







1.点击左上角『HTML』进入源代码模式。








2.修改『justify-content:』之后的代码即可让图片居左、居右、居中。



flex-start代表居左、center代表居中、flex-end代表居右。示意图如下:








3.假设你想将第一张隐藏图片改为居左,即将flex-end改成flex-start即可。










4.修改完毕后可以根据隐藏图片的位置,适当的调整背景图。(不太清楚的还可以看文末的视频版教程)


注意事项:


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






好啦,今天的教程就到这里,原文教学视频可参考:https://mp.weixin.qq.com/s/6gcvm7Vkr0R2APIonRdqtA


文章评价
登录后可以评论
立即登录
小伍资深编辑
共637篇文章
最近文章
更多
  • 乞巧节微信公众号推文排版素材(爱情浪漫活动推广文案)
  • 二十四节气立秋图文排版素材(金黄色系立秋推文文案模版)
  • 八一建军节纪念日推文排版样式(光辉历程文案宣传模版)
  • 八一建军节推文宣传排版素材(中国工农成立纪念宣传文案模版)
比格设计
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
比格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
管小助
企业营销、私域流量运营——站式营销管理平台
推荐文章
广告变现近「2000万」却志不在此! 剧情号“遇见她”目标直播带货
通过内容运营的三个阶段,让你掌握内容运营的核心
用户运营平台产品设计指南
浅谈用户运营中的用户分层
内容运营:戴上写作的六顶思考帽
5000字方法论:4个细节,决定私域能不能赚钱
一文详解:渠道投放工作需要的五种思维
一个案例说明白用户分析怎么用
22条视频,涨粉12.6万,一个女孩子在抖音靠洗车也能月入过万!
用户分群模型,这么建才有用
热门素材样式
运营导航
运营工具
分享到