Tw-fade: 纯CSS滚动驱动的边缘遮罩

# tw-fade - Tailwind CSS 滚动边缘淡出效果 来源：https://pete.design/tw-fade 优雅的滚动驱动边缘遮罩。一个class。零JavaScript。由tw-shimmer（https://www.npmjs.com/package/tw-shimmer）的创作者之一打造——仅用CSS实现闪烁效果，npm周下载量超过475k。 `npm i tw-fade` ## 水平方向 `fade-x` ## 垂直方向 `fade-y` 这个 feed 有硬边缘 给滚动区域添加 fade-y 还需要再加一个容器吗？ 不需要。直接用在滚动的元素上。 在顶部，淡出效果会保留吗？ 不会，顶部淡出会消失。 那在底部呢？ 底部淡出也会消失。 最新消息保持清晰。 水平标签也支持吗？ 在导轨上使用 fade-x。 能让淡出范围更宽吗？ 设置更大的 range 值。 只保留顶部边缘？ 使用 fade-t。 ## 高级用法 `fade-x fade-y fade-size-2xl fade-range-md` 外围的短暂性 外围的短暂性 外围的短暂性 外围的短暂性 外围的短暂性 外围的短暂性 外围的短暂性 外围的短暂性 外围的短暂性 外围的短暂性 外围的短暂性 淡出大小 2xl | 滚动范围 2xl ### 滚动感知 只有当有更多内容可滚动时才会显示淡出效果，滚动到任一边缘时淡出效果会逐渐消失。 ### 平滑渐变 缓动阿尔法渐变使内容融入背景，而不是在裁剪线处突然截止。 ### 可组合 方向、大小、范围和清除区等工具类可直接组合在滚动容器上。 ## 适用于任何背景 消散 | 退去 | 柔化 | 消失 | 淡出 | 模糊 | 虚影 | 扩散 | 退潮