建站
咨詢
售后
建站咨詢
新聞中心
本文利用 CSS @property 來實現(xiàn)一些有意思的(但可能沒什么用的)事情。
“專業(yè)、務實、高效、創(chuàng)新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)公司是您可以信賴的網(wǎng)站建設服務商、專業(yè)的互聯(lián)網(wǎng)服務提供商! 專注于做網(wǎng)站、成都網(wǎng)站制作、軟件開發(fā)、設計服務業(yè)務。我們始終堅持以客戶需求為導向，結(jié)合用戶體驗與視覺傳達，提供有針對性的項目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領市場！
漸變動畫的歷史
我們都知道，在之前，我們想實現(xiàn)漸變的動畫，其實是非常復雜甚至是做不到的。
例如，從下圖 A 狀態(tài)，到 B 狀態(tài)：
- 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 之后，我們可以非常輕松的實現(xiàn)漸變直接的動畫效果，只需要這樣改造一下代碼：
- @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: propertyChange 4s infinite linear;
- }
- @keyframes propertyChange {
- from {
- --colorA: black;
- --colorB: deeppink;
- }
- to {
- --colorA: green;
- --colorB: blue;
- }
- }
可以非常輕松的得到漸變的變化動畫效果：
對于 CSS @Property 還不算太了解的，可以猛擊這篇文章：CSS @property，讓不可能變可能[1]
利用 CSS @property 探尋漸變的極限狀態(tài)
基于此，我們就可以利用 CSS @property 來搞事了。
我們可以利用它，觀察漸變的一些極限狀態(tài)?？纯吹綕u變粒度非常小的時候，會發(fā)生什么，它的變化狀態(tài)又是如何的。
主要是利用多重線性漸變、多重徑向漸變、多重角向漸變。
多重線性漸變
它們的代碼其實都大同小異：
- @property --per {
- syntax: '
'; - 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，觀察動畫的變化：
我們還可以通過 hover 偽類，在 hover 元素的時候添加 animation-play-state: paused 以暫停動畫。
多重徑向漸變
和上述代碼一樣，只需要把 repeating-linear-gradient() 改為 repeating-radial-gradient() 即可。
最終的動畫效果：
這里還有兩張演示圖：
多重角向漸變
和上述代碼一樣，只需要把 repeating-linear-gradient() 改為 repeating-conic-gradient() 即可。
最終的動畫效果：
由于完整的變化圖片超出了限制，我只能每秒截取了 3 幀，所以看起來非?？D，實際是非常流暢的，補充一個完整的 5 秒的變化：
可以看到，在 --per 逐漸變小的過程中，整個漸變圖形呈現(xiàn)出了非常有意思的效果，在小于 0.1% 基本已經(jīng)處于一種非常抽象看不懂的狀態(tài)，在小于 0.00001% 后，圖形已經(jīng)無法被渲染出來了。
上述完整的代碼，你可以戳這里：CSS 靈感 -- 利用 CSS @property 探尋漸變的極限效果[2]
基于此，其實還可以做很多有意思的事情，譬如實現(xiàn)一個電視的雪花效果：
CSS 靈感 -- 利用漸變及 CSS Property 實現(xiàn) TV 噪音動畫[3]
CSS @property 其實非常強大，本文只是介紹它的冰山一角，旨在讓大家淺顯的了解有這么個東西，在 CSS 動畫的過程中如果發(fā)現(xiàn)有一些本身不支持的動畫的屬性，可以考慮利用 CSS @proerpty，巧妙的實現(xiàn)它~
最后
好了，本文到此結(jié)束，希望對你有幫助 ????
參考資料
[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 實現(xiàn) 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 探尋漸變的極限狀態(tài)
文章地址：http://fisionsoft.com.cn/article/cdggicj.html
