本文使用CSS@property来做一些有趣（但可能无用）的事情。我们都知道渐变动画的历史。以前我们想实现渐变动画，其实很复杂，甚至是不可能的。比如下图中从状态A到状态B：);}to{background:linear-gradient(green,blue);}}获取不到补间动画，只能获取两帧动画切换：配合CSS@property，可以轻松实现渐变和直接动画效果，只是像这样修改代码：@property--colorA{syntax:"";inherits:false;initial-value:black;}@property--colorB{syntax:"";inherits:false;initial-value:deeppink;}div{width:300px;height:150px;background:linear-gradient(var(--colorA),var(--colorB));animation:propertyChange4sinfinitelinear;}@keyframespropertyChange{from{--colorA:black;--colorB:deeppink;}to{--colorA:green;--colorB:blue;}}可以轻松搞定渐变变化的动画效果：对CSS了解不多的@Property，可以slam本文：CSS@property，让不可能成为可能[1]使用CSS@property探索渐变的极限状态基于此，我们可以使用CSS@property来搞事情。我们可以用它来观察梯度的一些极限状态。看看当梯度非常小时会发生什么以及它如何改变状态。它主要使用多个线性渐变、多个径向渐变和多个角度渐变。多重线性渐变的代码其实都差不多：@property--per{syntax:'';inherits:false;initial-value:100%;}body{background:repeating-linear-gradient(45deg,deeppink,#fc0,#000,red,green,grayvar(--per));animation:perChange60sinfinitelinear;cursor:pointer;&:hover{animation-play-state:paused;}}@keyframesperChange{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%;}}通过控制多个线性渐变的数量percentage--per，观察动画变化：我们也可以通过hover伪类添加animation-play-state:paused来在悬停元素时暂停动画。多重径向渐变与上述代码相同，只是将repeating-linear-gradient()改为repeating-radial-gradient()即可。最终的动画效果：再放两张demo图：Multipleangulargradient和上面的代码一样，只是把repeating-linear-gradient()改成repeating-conic-gradient()即可。最终的动画效果：由于全变图超限，我每秒只能抓取3帧，所以看起来很卡，但实际上很流畅。添加一个完整的5秒变化：可以看到，在--per逐渐减小的过程中，整个渐变图形呈现出一种非常有趣的效果。当低于0.1%时，基本处于非常抽象、不可理解的状态。小于0.00001%后图形就不能再渲染出来了。上面的完整代码，你可以点击这里：CSSInspiration--UseCSS@propertytoexplorethelimiteffectofgradient[2]基于此，你其实可以做很多有趣的事情，比如实现一个电视雪花效果：CSS灵感--使用渐变和CSSProperty实现电视噪音动画[3]CSS@property其实很强大。本文只介绍了冰山一角。对于不支持的动画属性，可以考虑使用CSS@proerpty巧妙的实现~本文到此结束，希望对你有所帮助：）参考[1]CSS@property，让不可能成为可能：https://github.com/chokcoco/iCSS/issues/109[2]CSSInspiration--使用CSS@property探索渐变的极限效果：https://csscoco.com/inspiration/#/./background/css-property-variable-bg-change-animation.md[3]CSS灵感——利用渐变和CSS属性实现电视噪声动画：https://csscoco.com/inspiration/#/./background/background-css-property-tv-noise[4]CSS灵感：https://csscoco.com/inspiration/#/[5]Github--iCSS：https://github.com/chokcoco/iCSS
