溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用CSS3怎么實現顏色漸變效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
<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庫基本都是用的這種方式實現各種動畫的。
-webkit-animation: hue 60s infinite linear;
這里定義了一個名為hue的動畫名，第二個參數設置動畫持續時間為60s，第三個指定動畫播放次數無限次，第四個設置速度變化（從頭到尾速度相同）。
CSS動畫也是采用的關鍵幀的方法，下面的那一段就是在定義頭尾的關鍵幀，讓這個動畫真正的動起來！
from {
...
}
to {
...
}就是說從開頭(0%)到結尾(100%)分別是什么狀態！再結合-webkit-animation第四個參數的速度變化，讓他更合理的動起來！
-webkit-filter我也不知道什么意思，查查W3C怎么講的吧。
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
用來調整可視效果？不明覺厲。再看看屬性hue-rotate()是什么意思：
給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當于又繞一圈。
色相旋轉？？懂了好像又沒懂？作為前端工程師，基本的色彩原理還是要知道的：
這就是色相環，這里是24種代表顏色，實際在屏幕上可以顯示的RGB顏色有16萬種。就是說，上面的顏色變化，在一分鐘內有16萬種變化……
上面可以很明顯的知道這是一個圓環，hue-rotate()就定義了當前顏色在這個圓環上的偏轉角度。
顏色變化大概就是這么多了，現在自己實現一下吧：
<!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怎么實現顏色漸變效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
