一图看懂好利来老鼠接奶酪SVG交互|伸长+滑动叠加排版|E2.COOL黑科技SVG编辑器

点击首页,GIF 开始播放并透出下层内容。金色的芝士浪花完全消散后,可见趣味的小老鼠接奶酪特效。并且你可以左右滑动它们,着实妙趣横生。

素材形态

Slice

这一特效依托多组 GIF 布局而成,其主体可采用黑科技编辑器的「点击-播放GIF-伸长」,而切换后的滑动效果通过「浮层」和「半屏容器滑动(逆向)」进行组合实现。

素材准备

素材的特殊之处在于**金色的芝士浪花实际为透明 GIF,**因此可以自然而然露出 GIF 的结束画面(动态背景):

它们的实际结构图层关系如下,随着过场 GIF 的运行会逐步展示底层的背景动态和可滑动的透明小老鼠:

下方展示在黑科技 SVG 编辑器中的核心布局。其中 GIF 最后一帧上传的是过场动态结束时背景 GIF,「浮层」组件则巧妙地将「半屏容器滑动」反向叠加在了背景 GIF 上------这种模版应用策略充分体现操作者的变通能力。GIF 播放时间填写 3.4,无需单位(s)。

相关推荐
MicroTech20257 分钟前
微算法科技(NASDAQ: MLGO)使用机器学习保障量子安全下区块链高效可用
科技·算法·机器学习
Shang180989357262 小时前
SSD202D星宸科技SigmaStar一颗高度集成的嵌入式智能触控显示板解决方案SSD202集成了硬件H.264/H.265视频解码器、内置了DDR
科技·嵌入式硬件·fpga开发·ssd202d嵌入式智能显示
咬人喵喵8 小时前
清明春游主题核心 SVG 交互玩法 + 案例 + 组件 / 教程
交互
朗心心理11 小时前
朗心科技:以数智化引领心理健康服务新标杆
大数据·人工智能·科技·心理健康·朗心科技·数智化心理育人·一站式心理中心建设
Laurence13 小时前
Qt 前后端通信(QWebChannel Js / C++ 互操作):原理、示例、步骤解说
前端·javascript·c++·后端·交互·qwebchannel·互操作
waiting&fighting14 小时前
无人机垃圾清理技术新进展
科技·创业创新
bandaostart15 小时前
VsCode+Cmake使用说明
ide·vscode·编辑器
freshman_y15 小时前
个人VSCode一些配置记录
ide·vscode·编辑器
星幻元宇VR15 小时前
VR环保学习机|科技助力绿色教育新模式
大数据·科技·学习·安全·vr·虚拟现实
自动化智库15 小时前
欧姆龙E5EC-QR2ASM-820温控器设置方法
科技