到目前為止，CSS的漸變屬性 linear-gradient 和 radial-gradient 已經(jīng)是很成熟的CSS特性了，而且 repeating-linear-gradient 和 conic-gradient 也越來越成熟。CSS漸變特性對于我們的幫助已經(jīng)非常強(qiáng)大了，它們可以幫助我們繪圖、 創(chuàng)建圖片占位符 、制作環(huán)形進(jìn)度條等等。另外還可以通過 transition 和 animation 讓漸變動起來。

但是給漸變添加動畫效果目前還有很多極限性，如果不添加額外的元素或其他的漸變屬性，有些效果是無法實現(xiàn)的，比如下面這個效果。

不過，在Edge瀏覽器，使用 @keyframes 就可以實現(xiàn)上圖的效果，而且代碼很簡單：

html {
    background: linear-gradient(90deg, #f90 0%, #444 0) 50%/ 5em;
    animation: blinds 1s ease-in-out infinite alternate;
}

@keyframes blinds {
    to {
        background-image: linear-gradient(90deg, #f90 100%, #444 0);
    }
}

在些基礎(chǔ)上，借助CSS的處理器，比如Sass，可以讓上面的代碼變得更為靈活：

@function blinds($open: 0) {
    @return linear-gradient(90deg, #f90 $open*100%, #444 0);
}

html {
    background: blinds() 50%/ 5em;
    animation: blinds 1s ease-in-out infinite alternate;
}

@keyframes blinds { 
    to { 
        background-image: blinds(1) 
    } 
}

雖然上面的代碼實現(xiàn)了所需的效果，但使用CSS來維護(hù)和使用仍然還是需要編寫代碼，這是事實。動畫效果也只是停留在 0% 到 100% 之間，能達(dá)到我們所要的效果。不過，要是使用 0 或 0px 來替代 0% 的話，結(jié)果就會令人失望，動畫效果失蹤了。更不用說在Chrome和Firefox瀏覽器上了，能看到的僅僅就是 #f90 到 #444 兩個顏色之間的切換，根本沒有停止位置的動效。

慶幸折是，現(xiàn)在我們有一個更好的選擇： CSS自定義屬性 ！

雖然我們可以獲得過 transition 效果（但不是 animation 效果），但是如果我們使用的屬性是可動畫化的，那么CSS自定義屬性是不可動畫化。比如，當(dāng)在 transfrom 中使用時，我們可以在 transition 中使用 transfrom 屬性。

讓我們來做一個效果，復(fù)選框選中時，橙色正方形（ .box ）將會移動并且會被壓扁的效果。我們在 .box 中定義了一個自定義屬性 --f ，并且初始值設(shè)置為 1 ：

.box {
    --f: 1;
    transform: translate(calc((1 - var(--f)) * 100vw)) scalex(var(--f));
}

當(dāng)復(fù)選框被選中時 :checked ， .box 的自定義屬性 --f 的值變成 .5 ：

:checked ~ .box { 
    --f: .5 
}

在 .box 中添加 transition 屬性，我們可以讓 .box 從一個狀態(tài)到另一個狀態(tài)時，整個過程是一種細(xì)膩的滑動效果。

.box {
    --f: 1;
    transform: translate(calc((1 - var(--f)) * 100vw)) scalex(var(--f));

    transition: transform .3s ease-in;
}

總結(jié)

以上所述是小編給大家介紹的使用CSS transition和animation改變漸變狀態(tài)的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論