推荐适合七夕的SVG模版（第II期）

宝藏模版

往期推荐（点击阅读）：

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

各位黑科技编辑器的会员，编辑器内的 SVG 组件你们都用过吗？七夕将至，以下过往专题亦可参考：

推荐适合情人节的SVG模版 <br/> 推荐适合情人节的SVG模版 （第Ⅱ期）<br/> 推荐浪漫七夕的SVG模版

推荐适合520/521的SVG模版 <br/> 推荐520主题的SVG模版 （第Ⅱ期）

卡牌游戏（多热区无限浮现-关闭）

在完美日记公众号的《 情人节翻牌游戏！翻到什么送什么！》中，设计师以「翻牌」为互动意象，通过「多热区无限浮现-关闭」组件生成了整套 SVG 交互排版：

关于此模版的使用，应注意操作时各个热区不可发生重叠。Ceep 老师此前也录制了专题视频进行讲解。

产品多点缩放展示（地图多点游走）

在 ORIBE 公众号的《520抽奖｜以繁花释放爱意》中，设计师创造性地将「UGC｜地图多点游走缩放」SVG 模版转化为产品细节的缩放展示，便于消费者更自由地探索产品细节，视觉体验优雅灵动：

可前往视频号，通过 Ceep 老师的案例分析一起来了解它的排版布局方式。

而近期发布的《我要开始发疯了！！！》广受用户好评，它同样基于这款由@2H 大神发明的 SVG 组件实现，足见其通用性之广。可点击《SVG教程｜发疯工位DIY｜地图游走&文字输入组件｜E2.COOL》查看 SVG 排版解析。

在 Tiffany 公众号的《故事，从开启蓝盒开始……》中，设计师娴熟应用了黑科技 SVG 编辑器的多款 SVG 组件，其中尤为出彩的是「UGC｜SVG无限选择器」嵌套产品图滑动：

「SVG 无限选择器」是由@科蚪 大神发明并独家授权至 E2 平台的正版 UGC 组件，可查看原作的案例分析。

此外也可以在该组件中嵌入纵向滑动，形成另一种独特的展示效果：

自动连续动画（自由布局）

在荣耀手机公众号《一封穿越时空的情书！七夕献映，敬请期待》中，开场的丝滑自动动画得益于纯 SVG 代码的驱动：

我们可以利用黑科技 SVG 编辑器中的「自由布局」大区组件，结合「零高容器」与「自动伸长」叠加而成，且多个动画因结构相似故均可快速复制仅修改时间参数，具体排版参考如下：

图片消失-滑动出现

品类丰富亟需应用滑动展示，但又想确保长图的初始整体感？那么这时候就适合通过「图片消失-滑动出现」将一图流与多图滑动进行衔接，点击下方画面并滑动体验：

在黑科技编辑器的组件搜索功能内查找「图片消失-滑动出现」组件即可使用！注意保持设计素材尺寸相同，还可查看筛选器内的多个变体效果。

视频号跳转美化（双层）

对视频号进行美化处理，是当前一图流 SVG 交互设计的主流策略。且越来越多的品牌开始采用动静分离的排版，让美化效果形成双层布局，极大提升清晰度感官：

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