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

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

不過(guò)，在Edge瀏覽器，使用 @keyframes 就可以實(shí)現(xiàn)上圖的效果，而且代碼很簡(jiǎ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) 
    } 
}

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

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

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

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

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

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

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

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

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

    transition: transform .3s ease-in;
}

總結(jié)

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

最新評(píng)論