数据库2025-10-03 21:05:126

利用 CSS @property 探寻渐变的极限状态

本文利用 CSS @property 来实现一些有意思的利用(但可能没什么用的)事情。

渐变动画的寻渐历史

我们都知道，在之前，极限我们想实现渐变的状态动画，其实是利用非常复杂甚至是做不到的。

例如，寻渐从下图 A 状态，极限到 B 状态：

<div></div> div { width: 300px; height: 150px; animation: gradientChange 5s infinite linear; } @keyframes gradientChange { from { background: linear-gradient(black,状态 deeppink); } to { background: linear-gradient(green, blue); } }

我们无法得到补间动画，只能得到两帧动画的利用切换：

而有了 CSS @property 之后，我们可以非常轻松的寻渐实现渐变直接的动画效果，只需要这样改造一下代码：

@property --colorA { syntax: "<color>"; inherits: false; initial-value: black; } @property --colorB { syntax: "<color>"; inherits: false; initial-value: deeppink; } div { width: 300px; height: 150px; background: linear-gradient(var(--colorA),极限 var(--colorB)); animation: propertyChange 4s infinite linear; } @keyframes propertyChange { from { --colorA: black; --colorB: deeppink; } to { --colorA: green; --colorB: blue; } }

可以非常轻松的得到渐变的变化动画效果：

对于 CSS @Property 还不算太了解的，可以猛击这篇文章：CSS @property，状态让不可能变可能[1]

利用 CSS @property 探寻渐变的利用极限状态

基于此，我们就可以利用 CSS @property 来搞事了。寻渐

我们可以利用它，极限观察渐变的一些极限状态。看看到渐变粒度非常小的时候，亿华云计算会发生什么，它的变化状态又是如何的。

主要是利用多重线性渐变、多重径向渐变、多重角向渐变。

多重线性渐变

它们的代码其实都大同小异：

@property --per { syntax: <percentage>; inherits: false; initial-value: 100%; } body { background: repeating-linear-gradient(45deg, deeppink, #fc0, #000, red, green, gray var(--per)); animation: perChange 60s infinite linear; cursor: pointer; &:hover { animation-play-state: paused; } } @keyframes perChange { 5% { --per: 1%; } 10% { --per: .1%; } 30% { --per: .01%; } 50% { --per: .001%; } 70% { --per: .0001%; } 78% { --per: .00001%; } 90% { --per: .000001%; } 95%, 100% { --per: .0000001%; } }

通过控制多重线性渐变的没份的百分比 --per，观察动画的变化：