宝藏模版

往期推荐（点击阅读）：

趣味效果｜高大上｜可爱风｜年终总结I｜年终总结II｜循环特效｜情人节I｜情人节II｜情人节IIII｜妇女节I｜妇女节II｜儿童节I｜儿童节II｜儿童节III｜618I｜618II｜父亲节｜丝滑动画｜端午节I｜端午节II｜滑动妙用｜图片轮播I｜图片轮播II｜又红又专｜中秋节I｜中秋节II｜双十一I｜双十一II｜世界杯｜感恩节｜圣诞节I｜圣诞节II｜新年｜兔年春节｜元宵I ｜元宵节II｜愚人节I｜愚人节II｜杂志范儿｜520/521I｜520/521II｜五一I｜五一II｜五一III｜母亲节I｜母亲节I｜多巴胺｜微博｜夏日氛围｜大唐国风｜反诈宣传｜七夕节｜CityWalk｜开学季II｜开学季II｜校园主题｜揭露丑恶真相｜运动会I｜运动会II｜十一｜万圣节I｜万圣节II｜冬季氛围｜新闻宣传｜春节红包I｜春节红包II｜龙年春节｜开工新品｜地球日｜问答题｜人工智能｜踏青出行｜五四青年节

各位 E2.COOL 的会员，编辑器内 1700+ 的 SVG 正版组件你们都用过吗？母亲节即将到来，各大关联品牌的产品推广和节日祝福都少不了 SVG 交互设计的加持。

无限选择器

基于@科蚪 大神发明的 SVG 无限选择器，《把爱都给她》实现了图文内分类菜单的功能化设计，每个选项内又支持多个产品图滑动，并可以点击下方按钮跳转电商页面；而《好个奇，你的「小号」练到哪了》则利用无限选择器，结合像素风设计组合成了一个万能妈妈的互动模块：

这种 H5 感的 SVG 信息展示方法，我们已经多次通过授课为广大 E2 编辑器用户解析，这里可以查看由 Ceep 老师录制的一期视频专题进行学习。

标签抽拉

基于@GL 大神发明的 SVG 标签抽拉，《来自花园的礼物》通过卡片组呈现了另一种产品广告的多选展示策略：

这种抽拉 SVG 黑科技排版还有更多丰富的公众号排版应用，点击视频学习 Ceep 老师录制的专题课程。

一条线轨迹运动

E2 编辑器的 SVG「一条线」模式在绝大多主题场景下都可圈可点，《母亲节 | 她是世界上平凡而伟大的存在》正是采用了该方法讲述了属于母亲的温暖故事：

它的具体排版实现方法我们也录制了专门的视频课程进行讲解。

填字特效（横向顶层滑动）

把偏见化为理解——《张雨绮：今天别叫我妈妈》通过文案层面的变化巧思，构建了 SVG 填字互动的「顶层滑动」排版：

头条新闻（连续撕纸）

把妈妈的好告诉全世界！《我的妈呀，太酷了！》以“母亲节头条”为主题，通过「连续撕纸」SVG 模版将爱与祝福以极具张力的方式呈现：

在黑科技编辑器内可以搜索功能内查找「连续撕纸」组件即可使用！当然要注意素材的尺寸需保持统一喔！

礼盒滑动（顶层滑动）

同样是基于 SVG「顶层滑动」，《母亲节特辑丨妈妈摇身一变，居然变成了···》将这一交互转变为滑开礼物盒的场景：

这种滑动的设计思路其实并不复杂，只需要在第二个滑动模块上传透明的空图素材即可。此外，还可以采用「层层滑动」SVG 模版实现更连续的开盒互动，参考《红包在哪里？（第一弹）》案例的效果和其他第三方的案例分析：

无限往返刷新器+纵向错层滑动

《妈妈，人生是______》以 E2 编辑器的「无限往返刷新器」开场，衔接精彩的纵向错层吸附滑动设计，也实现了一种文字互动式的 SVG 交互创意：

关于这种 SVG 交互的特效制作方法，可以浏览另一期相似案例解析进行学习：

自动层层伸长

如果你准备了大量文案内容，那么也可以参考《听，妈妈的话》、《全国母亲今天最想听到的是这个！》案例，采用 SVG 层层伸长的方式排版：

在黑科技编辑器内请选择组件「层层伸长」，并且在筛选器中选择你偏好的具体形式，制作时仅需对应上传每层切图即可。

伸长套伸长

《这个母亲节，WSLS人格火了》、《母亲节丨给妈妈的三行情书》则采用「伸长套伸长」这种层次丰富的 SVG 互动，展示多面母亲与多样祝福：

在黑科技编辑器内使用「伸长套伸长」时，务必仔细阅读《黑科技编辑器｜伸长套伸长SVG教程（合集更新）》教程并注意其中的参数计算规则：

逆向擦出伸长

针对具有转折性的剧情表现，很多运营人当下热衷于通过全文刷新的方式进行 SVG 设计，正如《我妈呢？？？》：

这种自下而上全文刷新的黑科技排版有多种在 E2 编辑器中的实现手法，你可以参考一下两期教程选择适合的方式实现：

1）「点击-收缩」实现逆向全文刷新SVG教程

2）逆向擦出伸长（含附件画面）SVG教程

更多海量模板，平均不足 1 元！

E2.COOL 秉持着让行业“人均 SVG”的生态理念，由多位黑科技排版设计的头部资深开发者共同打造，斩获包括法国设计奖、美国缪斯创意设计奖等诸多国际赛事大奖，帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议，也欢迎通过客服向我们提出，E2 将竭诚思考代码转化的可行性。

E2 平台官网

会的比别人多一点