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

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

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 成都创新互联公司是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于做网站、成都网站制作、软件开发、设计服务业务。我们始终坚持以客户需求为导向，结合用户体验与视觉传达，提供有针对性的项目解决方案，提供专业性的建议，创新互联建站将不断地超越自我，追逐市场，引领市场！

渐变动画的历史

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

例如，从下图 A 状态，到 B 状态：

 
 
 
 
      
  
  
  
  1.  
    2.  
 
 

 
 
 
 
      
  
  
  
  1. div { 
    2.   
  
  
  
  2.     width: 300px; 
    3.   
  
  
  
  3.     height: 150px; 
    4.   
  
  
  
  4.     animation: gradientChange 5s infinite linear; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6. @keyframes gradientChange { 
    7.   
  
  
  
  7.     from { 
    8.   
  
  
  
  8.         background: linear-gradient(black, deeppink); 
    9.   
  
  
  
  9.     } 
    10.   
  
  
  
  10.     to { 
    11.   
  
  
  
  11.         background: linear-gradient(green, blue); 
    12.   
  
  
  
  12.     } 
    13.   
  
  
  
  13. } 
    14.

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

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

 
 
 
 
      
  
  
  
  1. @property --colorA { 
    2.   
  
  
  
  2.     syntax: ""; 
    3.   
  
  
  
  3.     inherits: false; 
    4.   
  
  
  
  4.     initial-value: black; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6. @property --colorB { 
    7.   
  
  
  
  7.     syntax: ""; 
    8.   
  
  
  
  8.     inherits: false; 
    9.   
  
  
  
  9.     initial-value: deeppink; 
    10.   
  
  
  
  10. } 
    11.   
  
  
  
  11. div { 
    12.   
  
  
  
  12.     width: 300px; 
    13.   
  
  
  
  13.     height: 150px; 
    14.   
  
  
  
  14.     background: linear-gradient(var(--colorA), var(--colorB)); 
    15.   
  
  
  
  15.     animation: propertyChange 4s infinite linear; 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17. @keyframes propertyChange { 
    18.   
  
  
  
  18.     from { 
    19.   
  
  
  
  19.         --colorA: black; 
    20.   
  
  
  
  20.         --colorB: deeppink; 
    21.   
  
  
  
  21.     } 
    22.   
  
  
  
  22.     to { 
    23.   
  
  
  
  23.         --colorA: green; 
    24.   
  
  
  
  24.         --colorB: blue; 
    25.   
  
  
  
  25.     } 
    26.   
  
  
  
  26. } 
    27.

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

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

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

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

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

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

多重线性渐变

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

 
 
 
 
      
  
  
  
  1. @property --per { 
    2.   
  
  
  
  2.   syntax: ''; 
    3.   
  
  
  
  3.   inherits: false; 
    4.   
  
  
  
  4.   initial-value: 100%; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. body { 
    8.   
  
  
  
  8.     background: repeating-linear-gradient(45deg, deeppink, #fc0, #000, red, green, gray var(--per)); 
    9.   
  
  
  
  9.     animation: perChange 60s infinite linear; 
    10.   
  
  
  
  10.     cursor: pointer; 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.     &:hover { 
    13.   
  
  
  
  13.         animation-play-state: paused; 
    14.   
  
  
  
  14.     } 
    15.   
  
  
  
  15. } 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. @keyframes perChange { 
    18.   
  
  
  
  18.     5% { 
    19.   
  
  
  
  19.         --per: 1%; 
    20.   
  
  
  
  20.     } 
    21.   
  
  
  
  21.     10% { 
    22.   
  
  
  
  22.         --per: .1%; 
    23.   
  
  
  
  23.     } 
    24.   
  
  
  
  24.     30% { 
    25.   
  
  
  
  25.         --per: .01%; 
    26.   
  
  
  
  26.     } 
    27.   
  
  
  
  27.     50% { 
    28.   
  
  
  
  28.         --per: .001%; 
    29.   
  
  
  
  29.     } 
    30.   
  
  
  
  30.     70% { 
    31.   
  
  
  
  31.         --per: .0001%; 
    32.   
  
  
  
  32.     } 
    33.   
  
  
  
  33.     78% { 
    34.   
  
  
  
  34.         --per: .00001%; 
    35.   
  
  
  
  35.     } 
    36.   
  
  
  
  36.     90% { 
    37.   
  
  
  
  37.         --per: .000001%; 
    38.   
  
  
  
  38.     } 
    39.   
  
  
  
  39.     95%, 
    40.   
  
  
  
  40.     100% { 
    41.   
  
  
  
  41.         --per: .0000001%; 
    42.   
  
  
  
  42.     } 
    43.   
  
  
  
  43. } 
    44.

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

我们还可以通过 hover 伪类，在 hover 元素的时候添加 animation-play-state: paused 以暂停动画。

多重径向渐变

和上述代码一样，只需要把 repeating-linear-gradient() 改为 repeating-radial-gradient() 即可。

最终的动画效果：

这里还有两张演示图：

多重角向渐变

和上述代码一样，只需要把 repeating-linear-gradient() 改为 repeating-conic-gradient() 即可。

最终的动画效果：

由于完整的变化图片超出了限制，我只能每秒截取了 3 帧，所以看起来非常卡顿，实际是非常流畅的，补充一个完整的 5 秒的变化：

可以看到，在 --per 逐渐变小的过程中，整个渐变图形呈现出了非常有意思的效果，在小于 0.1% 基本已经处于一种非常抽象看不懂的状态，在小于 0.00001% 后，图形已经无法被渲染出来了。

上述完整的代码，你可以戳这里：CSS 灵感 -- 利用 CSS @property 探寻渐变的极限效果[2]

基于此，其实还可以做很多有意思的事情，譬如实现一个电视的雪花效果：

CSS 灵感 -- 利用渐变及 CSS Property 实现 TV 噪音动画[3]

CSS @property 其实非常强大，本文只是介绍它的冰山一角，旨在让大家浅显的了解有这么个东西，在 CSS 动画的过程中如果发现有一些本身不支持的动画的属性，可以考虑利用 CSS @proerpty，巧妙的实现它~

最后

好了，本文到此结束，希望对你有帮助 ????

参考资料

[1]CSS @property，让不可能变可能:

https://github.com/chokcoco/iCSS/issues/109

[2]CSS 灵感 -- 利用 CSS @property 探寻渐变的极限效果:

https://csscoco.com/inspiration/#/./background/css-property-variable-bg-change-animation.md

[3]CSS 灵感 -- 利用渐变及 CSS Property 实现 TV 噪音动画:

https://csscoco.com/inspiration/#/./background/background-css-property-tv-noise

[4]CSS 灵感:

https://csscoco.com/inspiration/#/

[5]Github -- iCSS:

https://github.com/chokcoco/iCSS

文章名称：利用 CSS @property 探寻渐变的极限状态
文章链接：http://www.shufengxianlan.com/qtweb/news30/160780.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站策划知识

同城分类信息

产品包装设计　　 　四川黔盛装饰　　 　商标注册　　 　整合营销　　 　腾讯香港空间　　 　成都娃娃鱼　　 　官网SEO排名　　 　防护网厂　　 　盐亭做网站　　 　手机网站建设　　 　成都网站制作　　 　消防维保　　 　网站空间　　 　成都网站SEO优化公司　　 　成都微商城　　 　乐山服务器托管　　 　成都网络营销　　 　手机网站建设　　 　巴彦网站建设　　 　成都婚庆策划