本篇文章給大家分享的是有關(guān)使用CSS3怎么實(shí)現(xiàn)顏色漸變效果，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有礦區(qū)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

Animate.css

.site__title {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
}

Animate it

.butt {
    border: 2px solid #f35626;
    line-height: 1.375;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-weight: 700;
    color: #f35626;
    cursor: pointer;
    -webkit-animation: hue 60s infinite linear;
}

以及一段很重要的代碼

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

重點(diǎn)部分就在于-webkit-animation，實(shí)際上animate庫(kù)基本都是用的這種方式實(shí)現(xiàn)各種動(dòng)畫的。

-webkit-animation: hue 60s infinite linear;

這里定義了一個(gè)名為hue的動(dòng)畫名，第二個(gè)參數(shù)設(shè)置動(dòng)畫持續(xù)時(shí)間為60s，第三個(gè)指定動(dòng)畫播放次數(shù)無限次，第四個(gè)設(shè)置速度變化（從頭到尾速度相同）。
CSS動(dòng)畫也是采用的關(guān)鍵幀的方法，下面的那一段就是在定義頭尾的關(guān)鍵幀，讓這個(gè)動(dòng)畫真正的動(dòng)起來！

from {
    ...
}
to {
    ...
}

就是說從開頭(0%)到結(jié)尾(100%)分別是什么狀態(tài)！再結(jié)合-webkit-animation第四個(gè)參數(shù)的速度變化，讓他更合理的動(dòng)起來！

-webkit-filter我也不知道什么意思，查查W3C怎么講的吧。

filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。

用來調(diào)整可視效果？不明覺厲。再看看屬性hue-rotate()是什么意思：

給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有較大值，超過360deg的值相當(dāng)于又繞一圈。

色相旋轉(zhuǎn)？？懂了好像又沒懂？作為前端工程師，基本的色彩原理還是要知道的：

這就是色相環(huán)，這里是24種代表顏色，實(shí)際在屏幕上可以顯示的RGB顏色有16萬種。就是說，上面的顏色變化，在一分鐘內(nèi)有16萬種變化……

上面可以很明顯的知道這是一個(gè)圓環(huán)，hue-rotate()就定義了當(dāng)前顏色在這個(gè)圓環(huán)上的偏轉(zhuǎn)角度。

顏色變化大概就是這么多了，現(xiàn)在自己實(shí)現(xiàn)一下吧：

    
    
    


    顏色漸變動(dòng)畫

以上就是使用CSS3怎么實(shí)現(xiàn)顏色漸變效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：使用CSS3怎么實(shí)現(xiàn)顏色漸變效果-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/dgsdoj.html