第Ⅱ期｜适合端午节的SVG模版-CSDN博客

本文链接：https://blog.csdn.net/e2_cool/article/details/141256427

宝藏模版

各位黑科技编辑器的会员，编辑器的 SVG 组件你们都用过吗？千舟竞渡波涛起，万鼓雷动四方鸣，提前祝广大用户端午安康！除了本期推荐外，你还可以回看《推荐适合端午节的SVG模版（第一期）》。

龙舟-点击-伸长

「点击-伸长」是最经典的一种 SVG 交互，在 SVG 编辑器内可以免费使用。结合端午主题它可以借助龙舟的造型特点实现别具传统特色的黑科技排版效果，参考民生信用卡公众号《乘风破浪的不止姐姐，还有赛龙舟的信用卡！》，点击下方画面体验：

它的布局思路非常简单，本质是一个「点击-伸长」和一个「无缝图」的组合，其中「点击前」为龙舟头部，「无缝图」为龙舟尾部，伸长时露出龙舟中段画面（点击放大查看）：

关闭闹「粽」！（弹出式海报）

「弹出式海报」作为同样经典的公众号交互范式，时至今日依然频繁涌现丰富多样的排版创意，在 SVG 编辑器内也可以免费使用。来看好利来公众号的《好利来好粽｜软糯出众咸甜荟萃》案例，点击下方画面体验：

这种布局策略非常适合展示多品类信息，既承载了大量的产品内容又保持了界面的简洁大方。同时弹出的图片支持保存，方便消费者转发或作他用，一举多得。

龙舟前行（浮层）

我们还可以通过 SVG 让龙舟动起来！这里建议大家利用黑科技 SVG 编辑器中独特的「浮层」组件，将它挂载在任何伸长类型动画之后，均可以产生类似舍得酒业公众号《端午 | 江河溯流光，舍得祈安康》的龙舟前行效果，点击下方画面体验。

因为「浮层」组件的特性在于与上一个布局结构底部对齐，并向上展示图片。因此当它放在伸长 SVG 模版后，就会随着伸长动画的运行而不断向下移动。这里另外推荐一则来自 Jameson 公众号的创意设计《空瓶回收｜一起打造尊美醇圣诞树》，设计师基于编辑器的「多段伸长」SVG 模版，结合「浮层」组件创作了酒瓶不断跌落切换卡通画面的巧妙互动设计。