Scroll Mask Playground

交互式体验 CSS scroll mask 效果，学习如何使用 animation-timeline 创建渐变遮罩效果。

浏览器支持

Chrome 115+ · 完全支持
Edge 115+ · 完全支持
Safari · 实验性支持（需启用功能标志）
Firefox · 暂不支持

此组件使用 CSS animation-timeline API 实现滚动驱动遮罩效果。如使用不支持此功能的浏览器，遮罩效果可能无法正常显示。

垂直滚动 (通知列表)

●

系统维护通知

系统将于今晚 02:00-06:00 进行例行维护

5 分钟前

✓

新功能发布

v2.5.0 版本已发布，包含暗色模式和性能优化

1 小时前

安全警告

检测到您的账户在新设备登录，请确认是否本人操作

2 小时前

●

文档更新

API 文档已更新，新增了批量操作接口说明

3 小时前

●

周报提醒

请在今天 18:00 前提交本周工作周报

5 小时前

●

会议邀请

产品需求评审会 - 会议室 A302

昨天

●

代码审查

PR #234 等待您的审查：用户权限模块重构

昨天

版本回滚

由于兼容性问题，已回滚到 v2.4.8 版本

2 天前

●

假期通知

端午节放假安排：6月10日-12日，共3天

3 天前

✓

活动结束

「开发者成长计划」第一季活动已圆满结束

1 周前

✓

系统升级

服务器集群已升级至新版本，性能提升 30%

1 周前

●

工单完成

您的工单 #8732 已处理完成，请确认

2 周前

参数配置

遮罩高度

CSS 代码

.masked-overflow {
  --mask-height: 80px;
  mask-image: linear-gradient(to top, transparent, currentColor 90%),
                linear-gradient(to bottom, transparent 0, currentColor 100%),
                linear-gradient(currentColor, currentColor);
  mask-size: 100% var(--top-mask-height),
             100% var(--bottom-mask-height),
             100% 100%;
  animation-name: show-top-mask, hide-bottom-mask;
  animation-timeline: scroll(self), scroll(self);
  animation-range: 0 100%, 0 100%;
  animation-fill-mode: both;
  mask-position: 0 0, 0 100%, 0 0;
  mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-composite: exclude;
}

@keyframes show-top-mask {
  0% { --top-mask-height: 0px; }
  to { --top-mask-height: var(--mask-height); }
}

@keyframes hide-bottom-mask {
  0% { --bottom-mask-height: var(--mask-height); }
  to { --bottom-mask-height: 0px; }
}

水平滚动 (标签云)

参数配置

遮罩宽度

CSS 代码

.masked-overflow-x {
  --mask-width: 80px;
  mask-image: linear-gradient(to left, transparent, currentColor 90%),
                linear-gradient(to right, transparent, currentColor 100%),
                linear-gradient(currentColor, currentColor);
  mask-size: var(--left-mask-width) 100%,
             var(--right-mask-width) 100%,
             100% 100%;
  animation-name: show-left-mask, hide-right-mask;
  animation-timeline: scroll(self inline), scroll(self inline);
  animation-range: 0 100%, 0 100%;
  mask-position: 0 0, 100% 0, 0 0;
  mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-composite: exclude;
}

@keyframes show-left-mask {
  0% { --left-mask-width: 0px; }
  to { --left-mask-width: var(--mask-width); }
}

@keyframes hide-right-mask {
  0% { --right-mask-width: var(--mask-width); }
  to { --right-mask-width: 0px; }
}

#Scroll Mask Playground

Scroll Mask Playground