麻烦啥前端？几句话完成可交互的动态 Banner

----

一个低成本、轻量化、设计师轻松实现的可交互的动态 Banner 图实现方式。

先上要实现的动态 Banner 效果

类似效果：bilibili.com 导航栏背景（Safari 不支持）

本方式上线效果：Pizza.rs

实现工具/载体: ChatGPT ,  SVG

----

先说下 SVG ，大家应该都很熟悉的一种矢量格式了，经常会用在 icon 或者 Logo 上，我们通常用画图软件去画好然后导出 SVG 格式。

但是，我们搜索 SVG 一下就知道，其实 SVG 是基于 XML 语法，并用文本格式的描述性语言来描述图像内容的。没错，它也是文本格式的，前端工程师自然可以用代码去把一些图像写出来。

同时，SVG 可以包含交互元素，也支持动画，可以通过 CSS 或 JavaScript 实现动态效果。SVG 里面可以直接内联 JavaScript 代码。也就是说，一个 SVG 文件内部可以包含描述画面的代码，也可以包含交互及动画的代码，一个文件搞定。

*上面视频展示了一些其他工具通过 SVG 可以实现的更丰富的动画（非本文内容）

看到这里是不是就明白了，很简单，我们要做的就是用 ChatGPT（或你喜欢的AI工具）帮我们写动画代码，然后把代码 command+c 再 +v 到我们导出的 SVG 文件里就 OK 了。

下面是步骤：

一、先在画图软件里画好图像。记得给图层/分组命好名，并导出 SVG。

二、用文本编辑器打开 SVG，复制里面的文本

三、把代码贴进 ChatGPT 并描述自己想要的动画效果

四、把 ChatGPT 写的代码 <script> 部分粘贴进 SVG 文件，保存后，用浏览器打开 SVG 看看效果。

如果出错了，描述清楚问题反馈给 ChatGPT，重复复制 <script> 里的内容粘贴到 SVG 里，直到正常。

五、最后是关键的调整步骤，ChatGPT 写的动画，动效图层不一定和你想要的一致。你只需要修改一下 <script> 里 const elements 下对应的 id，把你想要动起来的图层 id 填写进去就可以了。后面的 factor 这个系数，可以修改动效的幅度。也可以在后在复制一行，新增一个图层的动画。

六、结束啦，是不是几句话，再复制粘贴就完成了。

----

你说这是前端的活啊，我为什么要自己干？

我随便找几个理由吧

我是 i 人

细节自己把控

想改就改

只需要交付一个文件

----

最后总结下优点吧

轻量

示例的这个效果，这个 SVG 体积只有 7kb。如果用位图去做， 要多张位图去实现，压缩后体积也会比 SVG 大很多倍了，而且压缩还会损失质量。

低成本

这里主要是时间和沟通成本。

兼容性相对较好

B 站那个动效 Safari 上就不支持，SVG 是大多数现代浏览器都支持的。

----

好了，内容就这么多。也非常简单，算是分享了一个通过 AI 改进我们工作流程，提搞工作效率，最终增加摸鱼时间的一种方法了。希望能对大家有所启发。

附上这种动画的代码，自己改改代码里的图层名称，贴在 SVG 后面就能用。去试试吧？

❤️~