htmleditorkit不支持图片样式_svg还能这么玩?我用这个样式把图藏起来了!

ee1cc6e5734d0ff81722cba987ed6a1c.gif

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

“三儿,有没有那种样式,长按之后就显示底层内容,不按之后就恢复原样,不显示底层内容呢?”

就像这种↓

3850ef9584804874aa8c13944082418e.gif

昨天有个朋友拿着案例来问三儿,别问,问就是有,只是还没来得及给大家出教程!

是不是感觉很有意思啊?其实这是由上下两张图组成,长按就会显示下层图片!

那这种是怎么实现的呢?超级简单,赶快往下看看吧,三儿教大家!

5b42cd6bbe31045b74c2d518c0e21b6d.png

长按显示图片样式

ID:100505

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

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

一、如何更换内容?

  

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

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

3c0d07aac4dc48895cdbef6f7bdd42b8.png


2.搜索样式ID:100505,找到『长按显示图片』样式,插入至编辑器中。

37d1231150ee7a571efd56857155ac13.png

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

8933a4b55ba10f1252aeb45bea1408b9.png

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

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

a4845bc02d13cc3d34a1d5313560734a.png

注意:

①图片为倒序,背景图⑴为底层图片,即长按后显示的图片。

②这里的两张图片尺寸必须保持一致。png、gif、jpg格式的图片均可。

5.设置完所有内容以后,胖友们可以点击右侧菜单栏中的『手机预览』进行测试,因为该样式效果仅支持手机查看。

6a908062ce5548d4e36dac3d763658fd.png

注意事项:

5570de16e8744b65eb1ba312454e69a3.png

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

1f6353e99285f765c49c12831849833f.gif

二、视频版教程

  

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

1a926e9ed60b879a898e1347ee2294d0.gif

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

胖友们学会了吗?

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

可以留言告诉三儿

·EN

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

■ ■ ■ ■

不看后悔 01

微信更新丨聊天内容支持话题标签#!

02

模板推荐丨11月超好看模板送给你!

03

功能教程丨教你一键设置永久链接!

f6f86495c74ce88ccbce9e12aef3c347.gif

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值