首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

想不到吧,我的svg居然可以自己动!

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

最近有胖友在后台留言,问三儿有没有无缝左右滑动样式。

这不,三儿今天就给大家带来了上下左右无缝自动轮播样式,都不用手滑动,自动轮播切换。先来看看我们本期的SVG样式是什么效果吧

自动上下左右轮播

怎么样,这个滑动样式是不是有点不一样?丝滑流畅,自动轮播,搭配合适的图片就能够实现炫酷的效果!悄悄告诉大家,苹果就在推文中使用过类似的效果!

今天,三儿就来教大家如何使用吧!话不多说,教程开始!

一、如何更换内容?

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

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

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

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

4.在动画设置界面,我们就可以对样式内的图片进行更换了,胖友们可以选择『图片上传』按钮对图片进行替换。

注意:图片播放顺序是倒序播放,建议从最后一张开始倒序上传图片哦。

5.在图片上传界面,选择按样式图片比例裁剪上传。

这里需要注意的是:该样式只支持【4】张图片的切换,但是要上传5次图片,因为首图和尾图需要保持是同一张图片才能实现无缝轮播,否则会导致样式显示出现问题哦!

5.设置完所有内容以后,胖友们可以在右侧的预览框中进行测试,也可以返回编辑器界面,点击右侧菜单栏中的『手机预览』进行测试。

注意事项:

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

二、视频版教程

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

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

胖友们学会了吗?

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

都可以留言告诉三儿哦

·END·

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

■ ■ ■ ■

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20201014A0245100?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券