iSVG

由 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/）中通过「点击渐现」实现。

康师傅的这款新品速食泡面据悉包含了 8 种海鲜，如何能让用户在阅读过程中充分记住这一产品特性？这一次康师傅选择了最顶级的互动式 SVG 图文排版来打动受众。本作是比较少见的像素风插画设计，上一次圈内的同类型作品大约要追溯到二十世纪福克斯的《8像素闯关小游戏》。不过要注意的是，本作像素设计源自 AI 网格生成，产生了庞大的路径代码。尽管 JZ 在开发过程中已经对大量路径进行了简化合并，但依然对旧版 iPhone 和低版本安卓有极高的负载压力，导致部分机型卡顿明显。所以建议，对于要采用像素风设计的黑科技互动长卷排版，颗粒度不应过细。

玄虚文案搭配交互技术——但凡宝马与「AI」主题有关的图文，总是呈现出令人百思不得其解的指纹识别、人脸识别、AI 分析等功能。本作又展现了一番 AI 的写作能力，实际上每个选项都捆绑了该题对应的一层二维码矢量点阵（即该二维码本身采用的矢量图形式）。当你把三道题都点选过之后，这个二维码就能完整可见。GL 在其中还增加了不少防误触设计，确保了答案仅能二选一，二维码区亦不可反向触发编组，细节之处见功力。