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

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

三儿发现，胖友们都比较喜欢自动变换和展开样式的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。效果如下↓

三、视频版教程

  

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

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

胖友们学会了吗？

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

都可以留言告诉三儿哦

·END·

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

■ ■ ■ ■

不看后悔010203