查看原文
其他

这个svg也太好玩了吧,居然可以自动展开全文!

135编辑器 2023-02-26


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


三儿发现,胖友们都比较喜欢自动变换和展开样式的svg。自动变换能够省掉点击步骤,展开svg可以将隐藏的内容展开,两个样式都能给阅读者不一样的视觉体验。


so!技术小哥哥通过不断打磨,将这两种形式完美结合在一起了!


各位胖友先来看看是什么效果吧↓




怎么样,是不是有点意思?如何操作?还有哪些玩法吗?


不要犹豫,继续看下去,三儿教大家!




倒计时展开样式

ID:100653


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


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




一、如何更换内容?

  


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








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









2.搜索样式ID:100653,找到『倒计时展开』样式,插入至编辑器中。









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



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










4.在动画设置界面,点击『图片上传』,上传对应的图片即可。


注意:展开的图片显示为倒序,如果对图片顺序有要求建议倒序上传。每张图片的宽度必须保持一致哦。








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



注意事项:


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





二、还有哪些玩法?

  


图片的切换时间是可以调整的,切换时间不一样,显示效果也不一样。








1.选中样式,点击左上角『HTML』,切换到源代码模式。









2.页面拉到显示文字“第一屏画面”处,我们可以看到有四个begin,后面显示的1、2、3、4。分别表示,第一秒出现第一张图片,第二秒出现第二张图片……



依此类推,假设你想让图片切换的时间为2秒,那么数值分别要更换为2、4、6、8。效果如下↓




三、视频版教程

  


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





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

胖友们学会了吗?


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

都可以留言告诉三儿哦



·EN

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

■ ■ ■ ■



不看后悔01

排版分析丨美食这么排版美到爆!

02

功能更新丨商用免抠图片免费用!

03

模板推荐丨送你十篇超美模板!



您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存