使用CSS3怎么實現(xiàn)顏色漸變效果

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

目前累計服務客戶上千余家，積累了豐富的產(chǎn)品開發(fā)及服務經(jīng)驗。以網(wǎng)站設計水平和技術實力，樹立企業(yè)形象，為客戶提供網(wǎng)站建設、做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁設計、網(wǎng)絡營銷、VI設計、網(wǎng)站改版、漏洞修補等服務。創(chuàng)新互聯(lián)始終以務實、誠信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過對領先技術的掌握、對創(chuàng)意設計的研究、對客戶形象的視覺傳遞、對應用系統(tǒng)的結合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。

<h2 class="site__title mega">Animate.css</h2>

.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;
}

<button class="butt js--triggerAnimation">Animate it</button>

.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);
  }
}

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

-webkit-animation: hue 60s infinite linear;

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

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

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

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

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

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

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

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

使用CSS3怎么實現(xiàn)顏色漸變效果

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .title{
            color: #48c0c0;
            -webkit-animation: hue 5s infinite linear;
        }
        @keyframes hue {
            from {
                -webkit-filter: hue-rotate(0deg);
            }
            to {
                -webkit-filter: hue-rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <h2 class="title">顏色漸變動畫</h2>
</body>
</html>

以上就是使用CSS3怎么實現(xiàn)顏色漸變效果，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：使用CSS3怎么實現(xiàn)顏色漸變效果
URL標題：http://www.chinadenli.net/article24/ispcce.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、網(wǎng)站建設、移動網(wǎng)站建設、網(wǎng)站改版、用戶體驗、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

使用CSS3怎么實現(xiàn)顏色漸變效果