如何像人民日报一样『点亮武汉』?

相信大家今天都被人民日报的一篇推文刷屏了吧!这篇推文罗列出武汉的著名景点,将他们做成SVG动态效果,用户可以通过点击,达到点亮的效果


嘿,胖友们大家好呀,我是三儿。


相信大家今天都被人民日报的一篇推文刷屏了吧!这篇推文罗列出武汉的著名景点,将他们做成SVG动态效果,用户可以通过点击,达到点亮的效果。


为了方便胖友们的观看,三儿将这些图做成了动图,胖友们可以通过滑动来进行查看哦!









图片来源:人民日报



怎么样,是不是超级炫酷。这篇推文一经发出,瞬间刷爆全网,短时间内,取得了阅读在看双破10万+的成绩。


不少胖友纷纷来找三儿,询问这种推文是如何制作的。


这个简单,今天三儿就来教你们如何制作吧!




图片切换样式

ID:97878


【样式介绍】:在样式中点击上方的图片,可以显示下方的图片。可以搭配无缝图片样式制作更有趣味性的推文。


【可调整参数】:更换图片、更改图片尺寸。


【这些样式也可以用这个教程哦】样式ID:97481




01
图片切换样式展示


点击图片,点亮武汉↓
这段文字防止纯图片不显示

图片切换样式ID:97878





02
如何修改样式(文字版)


由于编辑器升级了专业版,简化了部分svg样式的操作流程,使得修改svg样式大部分参数无需再通过html代码实现。本点击样式所有参数都可通过动画设置调整。



将编辑器切换到专业版模式,点击样式区域弹出对话框,在【全局样式】中点击动画按钮,开始修改SVG样式参数。



这里需要注意的是:不是所有样式都有动画选项哦,只有SVG样式会有动画显示!









 
1.上传图片 


首先,我们需要将图片上传至135编辑器中。选择编辑区上方的图片上传按钮,选择你制作好的图片(两张图片需尺寸一样),点击上传按钮。



图片上传成功后,我们需要复制图片的地址才能够使用图片。


在135编辑器中,找到左侧的『图片素材』,在这里保存着你所在135编辑器中上传的图片。找到你刚上传的图片素材,点击下方的复制按钮,即可复制图片的地址。









 
 2.使用样式 


点击『显示底图样式,选择专业版编辑器菜单中的『动画』按钮,进入到『动画』编辑界面。



在这里,我们可以对整个样式进行修改。胖友们只需要将刚才保存的图片地址粘贴至图片链接中即可。




为了方便胖友们的操作,在动画编辑区域我们新增了动画展示框,胖友们完成图片的设置后,可以在右侧的展示区里点击样式查看效果哦!



Tip:这里需要注意的是,样式中使用的两张图需要大小一致,否则会使样式点击后显示有问题。








 
 3.修改样式代码  


有胖友可能要问了,那如果我的图片不是竖版的该怎么办呢?


别急,三儿来教你通过修改代码来解决!


首先将我们的样式插入至135编辑器中,选中样式后点击HTML代码进入代码编辑界面。



找到三儿标注出来的地方,将数字改为你图片的大小就可以开始按照上面的步骤进行修改了。



PS:不知道你图片的大小是多少?双击图片后选择『插入远程图片』,右侧就会显示这个图片的具体尺寸哦!









 
 3.修改持续时间  


“我想让点击后的动画时间长一点,该如何制作呢?”


这个就更简单啦,还是需要通过『修改HTML代码来实现哦,不过这次只需要更改一个数字就可以了!


首先,一定要先选中我们的样式,然后点击『HTML代码按钮。



然后找到  dur="2s" 这行代码,将里面的数字『2』更换为你想要让动画显示的时长,即可完成。




注意事项:


这里需要注意的是,排版完成后的推文需要使用135编辑器的保存同步功能,如果使用复制粘贴功能会导致样式失效哦!



以上就是本期的全部内容啦

胖友们都学会如何修改了吗?


想学习如何在这个样式中

添加炫酷的动图吗?

去二条看看!



- 恰饭时间 -


想学习更多SVG创意推文吗?

想排出一篇你老板都说妙的推文吗?

想靠着SVG升职加薪吗?


那你还等什么!

赶快来参加最新一期的社群小课吧!



本次社群小课,我们邀请到了135编辑器主编岩植,和大家分享如何利用svg样式,做出好玩有趣的互动排版,希望你可以通过这个课程,偷学借鉴排版思路,看看同一个svg样式,别人是怎么玩出新意来的。


Tips:135课堂年卡用户免费参加哦~



福利时刻-免费领取7天135编辑器VIP会员】


点击https://www.135editor.com/users/invite/ddb12a17ce400c35fe041d275a578351,注册135编辑器,即可获得7天VIP会员



文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
我只想做你的太阳资深编辑
一步一步努力向上!
共911篇文章
最近文章
更多
  • 知乎热议:微信公众号如何快速涨粉?
  • 0基础运营小白学习什么新媒体课程比较好?
  • 新媒体,自媒体新人必学的课程有哪些?
  • 不懂就问:新媒体运营应该怎样学习?
比格设计
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
比格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
管小助
企业营销、私域流量运营——站式营销管理平台
推荐文章
用户运营平台产品设计指南
浅谈用户运营中的用户分层
内容运营:戴上写作的六顶思考帽
5000字方法论:4个细节,决定私域能不能赚钱
一个案例说明白用户分析怎么用
22条视频,涨粉12.6万,一个女孩子在抖音靠洗车也能月入过万!
高价值社群的5大核心关键
抖音账号内容自检清单!
决定离职后,3天拿到offer的总结与反思!
【135早资讯】:教育部将彻查教材插图问题;抖音6月1日起将对本地生活商家收取服务费
热门素材样式
运营导航
运营工具
分享到