Experimenting With Scroll-Driven corner-shape Animations
核心内容
文章探讨了如何将 CSS 新属性 corner-shape 与 scroll-driven animations 结合，创造有趣的 UI 效果。
corner-shape 快速入门
corner-shape 支持多种关键字和 superellipse() 函数：
square- superellipse(infinity)squircle- superellipse(2)round- superellipse(1)bevel- superellipse(0)scoop- superellipse(-1)notch- superellipse(-infinity)
滚动驱动动画示例
@keyframes bend-it-like-beckham {
from {
corner-shape: superellipse(notch);
/* or */
corner-shape: superellipse(-infinity);
}
to {
corner-shape: superellipse(square);
/* or */
corner-shape: superellipse(infinity);
}
}
body::before {
position: fixed;
inset: 0;
pointer-events: none;
mix-blend-mode: difference;
background: white;
border-bottom-left-radius: 100%;
animation: bend-it-like-beckham;
animation-timeline: scroll();
}关键要点
- 数学性质: corner-shape 基于数学公式，因此天然支持动画
- 与 border-radius 配合: corner-shape 处理形状，border-radius 处理坐标
- 滚动驱动: 使用
animation-timeline: scroll()绑定滚动位置 - 兼容性: 需要 Chrome 139+ 才能完全支持
进阶用法
- Masking: 用 notch 形状覆盖边框，滚动时揭示边框
- 多重元素: 多个嵌套的 diamond 形状同时动画
- 结合 scroll-snap: 与滚动捕捉功能配合使用
技术价值
这是一篇实用性很强的 CSS 实战教程，展示了两个即将成为 CSS Baseline 的特性如何配合使用。corner-shape 是 border-radius 的伴侣属性，而 scroll-driven animations 是 Interop 2026 的重点特性。两者结合可以创造出过去需要 JavaScript 才能实现的视觉效果。