iSVG

点击锦鲤，你就可以在阅读过程中让一条摆动着的锦鲤沿特定轨迹不断向下游动，中途还会出现水波涟漪……JZ 在本作的交付中，应用了序列帧式互动、轨迹<-d>动画、双层触发等技术点。

这是一篇对代码编组有较高要求的测试题型 SVG 互动排版，需要实现点击时反馈当前选项正误并同步勾选正确选项，此外要并行出现题目解析并支持超链接转跳，因而即便如鼈臑这样的大神，在开发工作上也耗费了大量时间。测试题型 SVG 互动是近期相对较少出现的黑科技排版模式，品牌主不妨思考它的应用可行性。

由 JZ 提出的全新遮罩式滑动，可以在确保图片完整的情况下形成镂空效果，而无需上层挖空后再通过穿透触发。其关键在于<-webkit-mask-image>的技术应用，由此以往的各类穿透式滑动（如车窗外风景变化）制作更为便捷，有兴趣的运营人不妨尝试。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「顶层滑动」实现。

CSS 的类入榜花式排版，本期一所高校的反向滑动与 C4D 特效动态混合大作值得大家一看，足以秒杀绝大多数品牌号的排版设计。本文回顾了该校全年的推送数据，并制作了一条基于 C4D 合成的三维动画。对于滑动区，视频的部分片段被采集为 GIF 作为滑块盒子的背景图参数，半透明滑块的内容与动态背景的融合得当，主次清晰，并没有因为元素繁多而凌乱，因而被选入本期榜单。

应用了盲盒设计的品牌还有伊利。尽管伊利的 Agency 众多，但近期都频繁向我们几位开发者定制交互式图文，本作盲盒的交互流程更为丰富，前期串联了一组轨迹+透明度的符合动画组，后期串联了一组伪正反翻转动画。

抽签式 SVG 交互排版还能如何进化？荒村在迪士尼公众号套用了当下时兴的盲盒概念，让用户在图文消息中玩得尽兴。

本文我们在制作过程中融合了包括音频播放器（新版）改造、GIF 控制器、渐进式序列等 CSS 与 SVG 技术，使得全文的互动感极佳。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「GIF控制器」、「点击切换」等实现。

爱马仕本作通过简单的透明度动画与动静结合的图像设计，增加阅读趣味性的同时，保持了应有的格调。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「点击渐现」实现。