朋友们大家好，我是三儿

最近大家刷小红书，有没有刷到[同事工牌已经next level]点进去一看，好家伙大家精神状态都这么美丽的吗？

作为新媒体人，看到这么有趣的话题咱们的网感雷达早就「滴答滴」响起来了。

内容素材有了，该用什么样的形式呈现呢？

我们一般有两种思路，一是用点击换图，二是利用滑动呈现。

点击换图，相对比较简单，做两张尺寸相同的图片即可，举个列子。

▲点击图片换图▲

多次点击形状（X形状）过渡换图

组件ID：754

若是想要使用其他点击换图效果，我们可以在SVG编辑器中搜索「点击换图」，选择我们喜欢的效果使用即可。

整体而言点击换图的图片设计相对简单，确保尺寸一致即可，但如果用滑动，需要考虑的就会多一些，举个例子。

底图固定双层横向滑动-左右留白-滑动图可跳转

组件ID：526

我们选择了一个双层滑动，背景图固定顶层滑动。

三儿，你中间这个图也没有内容呀。

非也，因为这张图是一直透明底的png图，如果我们给他加上一个背景，你就能看到里面的内容。

滑动图1

滑动图2

是不是这样就看到内容了，这个滑动需要大家想明白的是，我们什么内容需要用户滑动填充，就把该内容单独做一张图出来。

例如这个案例，我们需要用户将「钟」字滑出来，那么背景图就需要制作一个不含「钟」字的内容。

我们准备好设计图后，就能开始制作滑动效果了。

在135编辑器左侧，点击SVG编辑器，进入SVG编辑器页面。

我们是一个横向双层滑动效果，所以我们只需要选择符合这个要求的组件即可，这里我们选择的是底图固定双层横向滑动-左右留白-滑动图可跳转组件ID：526

将组件添加进编辑页面，在右侧添加对应的素材内容。

制作好后，我们可以选择「导出」复制到135编辑器中，在SVG编辑器右上角找到「导出」选择「复制代码到135编辑器」

只需要Ctrl+v就可以了，如果想要添加在模板指定位置内，可以使用区域代码。

若是要替换图片位置 覆盖<img>标签内容即可

如果是段落文字，只需要覆盖<p>标签中的文字内容即可。

这样我们就能将SVG效果添加到模板中了。

以上就是本次推文的全部内容啦

大家还有什么想看想学的

记得在评论区留言噢

对了大家有看什么

令你眼前一亮的工牌吗？

欢迎留言讨论哦