当前位置：网站首页 > 技术文章 > 正文

网易的互动版涂小瓶子爆火，究竟是如何做到的?

zhezhongyun 2025-05-25 16:45 42 浏览

https://mp.weixin.qq.com/s/5vmXPBWcJZ_oZ4p1znNNLw

附上爆火图文链接，复制打开即可查看

其实最开始看见的时候没想到这个小小的瓶子会这么火，现在的SVG交互图文越发火热，许多品牌主都开始发布带有交互的图文，今天要说的是网易出品即刷屏的【互动版涂瓶子】是如何制作的，没错！这是一篇纯教程文，建议收藏！

其实想要实现这个效果也非常简单，最主要是要搞清楚原理。这一类可以产生交互的图文排版都是基于SVG技术实现的。

一、SVG 是什么？

1、SVG是可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述基于二维的矢量图形文件与jpg/png/gif的差别是更清晰，随意缩放不失帧，且可通过矢量软件绘制。

2、同时，SVG也是一种基于 XML的标记语言，可通过代码编译器编译。

二、SVG如何绘制

1、矢量绘制：AI灯矢量绘制软件

2、代码编译：vs code等代码编译软件（还有dw，vs等等，反正喜欢哪个用哪个）

三、小瓶子原理

好了，讲完基本知识就来全面拆解一下网易小瓶子的原理。

其实网易的小瓶子是由几个不同的图层叠加而成（点几次做几个），每个图层点击后透明度由1变为0并使宽度从0变为1，这样就可以再点击到下面的的图层，从而达到依次点击依次出现的效果。（然后将外观设置成一样，就可以营造出瓶子一点点变满的效果）

来源于【网易王三三】推文截图

四、代码拆解

以网易王三三的图文为例，可以看到每个瓶子下面都排列着四个<section>标签，然后给每个<section>标签都设置了margin-top=-85px（margin外边距，有四个值：top，bottom，right，left）让四个标签内容从竖直排列变成重叠。

每个<section>中均包含一个SVG画布，使用<background-image>将小瓶子设置成画布背景，

打开画布可以看见SVG中含有两组动画代码，分别为透明度以及宽度动画

透明度动画为：

用户在点击瓶子所在区域后，透明度从1变成0，SVG视觉上消失，但仅仅这样是不能够再次点击下面的图层，所以添加了宽度动画，使其宽度从1到0：

这样就可以达到点击一层消失一层的效果。

好了，相信看完这个自己动手应该能够做出来了，如果觉得有用的话麻烦点个赞，毕竟码字不易嘿嘿嘿

其实SVG除了这个效果还有其他应用效果，其余案例可翻看我以前的文章，是我以前整理的一些案例。

还有更多案例可关注公众号：三千喵，会不定期更新更多案例以及教程。

CSS Margin(外边距)

相关推荐