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

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

素材形态

Slice

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

素材准备

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

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

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

相关推荐
jinhuazhe20132 小时前
如何解决vscode powershell乱码
ide·vscode·编辑器
paintstar5 小时前
vscode 快速切换cangjie版本
ide·vscode·编辑器·仓颉·cangjie
科协软件20185 小时前
vscode+latex快捷键
ide·vscode·编辑器
半糖11226 小时前
【VSCode】常用插件汇总
vscode·编辑器
cnnews6 小时前
在vscode中的ESP-IDF插件中使用Arduino框架作为组件
ide·vscode·编辑器
乐闻x7 小时前
VSCode 插件开发实战(三):插件配置项自定义设置
ide·vscode·编辑器
边缘计算社区9 小时前
吉快科技荣膺“金边奖·最佳大模型一体机”,引领AI边缘新时代
人工智能·科技
因_果_律9 小时前
亚马逊云科技 re:Invent 2024重磅发布!Amazon Bedrock Data Automation 预览版震撼登场
大数据·人工智能·科技·亚马逊云科技·re invent
IT信息技术学习圈10 小时前
强基计划之编程:开启科研精英培养新路径
科技·强基计划
CSND74017 小时前
Ubuntu vi(vim)编辑器配置一键补全main函数
linux·c语言·ubuntu·编辑器·vim