胖友们大家好啊
就像是一场游戏一场梦
好 久 不 见
我是舍不得国庆的三儿
都说上班第一天的打工人
会变得格外脆弱
不同岗位打工人的崩溃
也许就在这一句话的瞬间
·
·
·
·
·
·
·
·
*以上的图片素材均出自比格设计,在比格设计中搜索关键词“条漫”即可下载使用
上面这些话,我希望你永远不懂,但是这个SVG互动效果,三儿可以来好好教教大家!
三儿这里用到的是SVG编辑器中的『连续翻页再点击展开』组合,可以实现多次翻页+展开的效果。
前段时间胖友问得多的喜茶这篇文章里的SVG,就可以用这个『连续翻页再点击展开』效果制作。
新品 | 内幕!多肉葡萄一夜“爆”富的秘密
三儿把教程给大家搬来啦,一起来看看吧~
使用教程
01 进入SVG编辑器
通过135编辑器左侧入口进入svg编辑器
或者直接在浏览器输入svg编辑器网址进入:
https://www.135editor.com/svgeditor/
02 添加组合效果
在『互动效果』栏目下的『组合』里,点击『连续翻页再点击展开』素材,将其添加到编辑区域。
03 上传图片素材
在编辑器右侧找到『添加图片』按钮,点击上传展开前的翻页图片。
04 编辑展开内容
点击『编辑展开内容』,在左侧素材区域选择需要的效果(例:无缝图),添加到展开内容里并配置好相应的,然后点击『完成』即可。
05 动画设置
『展开动画时长』:动画时长越长,展开效果呈现的时间就越久。
06 素材要求
多次翻页的每张图片宽高尺寸需要一致,所有图片宽度需要一致,展开内容的头部不可以放交互效果的内容,可以放无缝图
07 同步/导出到微信公众号
制作好的SVG文章可以通过使用『同步』或『导出』功能,保存到微信公众号平台。
好啦,以上就是今天的全部内容啦
胖友们有看到什么好看有趣的svg
留言告诉三儿,三儿教你呀
看在三儿努力码教程的份上
来个在看呗~
·END·
文章排版由135编辑器提供技术支持
■ ■ ■ ■
不看后悔
01
02
03
领取专属 10元无门槛券
私享最新 技术干货