163
● ● ● ● ◐ ○ ○
六种高级弹窗 ↗
暖色毛玻璃 · 独立合集
INTERACTION COLLECTION 2026 / 10
交互设计，
从示例开始。
按交互机制分类，保留独立可运行的 HTML 演示。点击任意入口，直接进入对应效果。
38 个交互06 种类别09 套演示
01 / 0608 EFFECTS
弹窗与浮层
内容浮起、模糊、翻转、拖动与局部展开
03 / 0605 EFFECTS
滚动与吸顶
滚动过程中的信息压缩与层级变化
雾隐岛 ⌃
大图片标题收缩 ↗
上滑压缩头图和标题，下滑恢复；信息始终保持可读。
04 动效Storytelling
滚动叙事 ↗
页面往下滚的时候，画面固定不动，里面的内容跟着滚动一步步变化，像翻一本动画书，苹果的产品页就常这么做。
06 动效Parallax
视差滚动 ↗
页面往下滚的时候，背景比前景动得慢，看起来有纵深，常用在官网首页。
09 动效Marquee
跑马灯 ↗
一排内容从右往左无限循环地滚，比如合作伙伴的 Logo 墙、用户评价。它是少数应该匀速走的动效；鼠标放上去时最好能停下来，方便看清。
12 动效Reveal
滚动出现 ↗
内容滚进屏幕的时候才淡入或滑入，而不是一打开就全摆在那。长页面用上它，读起来有节奏。
04 / 0615 EFFECTS
视觉动效
玻璃球、立体字标与贴纸爆发，三主题可逐帧探索
✦
FABLE · ASTRA · KIMI
玻璃球与贴纸爆发 ↗
云境 / 深空 / 极光 · 播放、暂停、逐帧定位及主题切换
CURVEiOS
连续曲率圆角 ↗
普通圆角与苹果连续曲率对比 · 七章节动画、曲率梳及自由实验
01 动效Beam
边缘流光 ↗
一道光沿着卡片的边框一圈一圈地转，用来突出推荐套餐、新功能这种最想让人看到的卡片。
02 动效Spotlight
聚光 ↗
鼠标在卡片上移动时，有一团光跟着鼠标走，把卡片和边框照亮，很多科技公司的官网都在用。
03 动效Tilt
3D 倾斜 ↗
卡片跟着鼠标的位置往不同方向微微倾斜，像拿在手里转着看，常用在产品卡片、会员卡展示。
05 动效Text
乱码解码 ↗
文字先是一串乱跳的字符，再一个个定格成正确的字，科技感很强，适合标题和数字。
07 动效Magnetic
磁吸 ↗
鼠标靠近按钮，按钮像被吸住一样往鼠标那边挪一点，适合首页上最重要的那个大按钮。
10 动效Shimmer
流光 ↗
一道光从表面扫过去。用在加载中的骨架屏上，表示正在加载；用在按钮上，吸引人去点。
14 动效Stagger
错峰 ↗
一组元素不是同时出现，而是一个接一个，每个差零点零几秒。列表、卡片墙用上它，马上有层次感。
15 动效Lift
悬停上浮 ↗
鼠标靠近卡片时，它轻轻抬高，底部与侧边的中性柔影自然扩散、加深；离开后柔和落回原位，像真实卡片离开桌面。
16 动效Easing
缓动 ↗
从头到尾一个速度叫匀速，看着像机器；先快后慢叫减速，最自然。进场用减速，离场要比进场更快、更轻；一起动的东西用同样的速度。
05 / 0603 EFFECTS
AI 图文呈现
AI 回答内容中的结构图、知识卡片、表格与代码排版
06 / 0603 EFFECTS
登录与表单
密码捂眼、失败情绪反馈、验证码与协议状态联动