css3使用animation屬性來實現背景顏色動態漸層的效果（附程式碼）
- 不言原創
- 2018-11-08 10:50:5321471瀏覽
網站中的背景顏色如果比較單一會顯得不夠美觀，那麼，如何讓背景顏色多變呢？本篇文章就來介紹使用CSS3動畫讓我們背景顏色逐漸改變顏色，調整顏色和順序的組合，讓顏色的設計更醒目。
話不多說，讓我們來看具體內容（推薦課程：css3影片教學）
首先我們來看一下CSS3關鍵影格動畫的基礎知識
讓我們先了解逐漸改變元素的動畫！在CSS 3 animation屬性中，您可以設定關鍵影格並繪製詳細的運動。關於動畫的時間和時機、無限的循環，只有CSS就可以指定了！
什麼是關鍵影格？
關鍵影格（傳遞點）是在動畫中定義變更的影格。我們@keyframes定義元素如何隨每個關鍵影格而變化。為了使動畫與其關鍵影格相匹配，您需要將@keyframes規則的名稱與為元素指定的animation-name屬性的名稱相符。
@keyframes規則的名稱宣告為「 @keyframes 任一名稱 」。我將寫入0％到100％的關鍵幀資訊。 0％表示開始動畫，100％表示結束時間。 0％from，100％可以用to替換。以下的範例是將背景顏色從紅色變更為橘色到粉紅色的關鍵框架。
@keyframes name {
0% { background: red; }
50% { background: orange; }
100% { background: pink; }
}說明：對於Chrome和Safari等WebKit瀏覽器，需要供應商前綴（-webkit-）。以寫作方式編寫“ -webkit-keyframes ” ，並在@和關鍵影格之間編寫-webkit-。
animation相關屬性
animation-name（動畫名稱）
@keyframes指定中定義的名稱。如果未指定此項，則不會執行動畫。此外，如果指定的動畫名稱與任何關鍵影格都不匹配，則不會執行該關鍵影格。
animation-duration（動畫持續時間）
透過「秒 s」指定執行一個動畫的時間長度。例如，「5秒」持續5秒。如果為0，則不會執行。即使指定了負值，也會將其視為0。
animation-timing-function（動畫定時功能）
指定動畫的時間以及如何繼續。您可以透過調整動畫進度速度的比例來表達平滑運動。
ease（初値）
ease-in
ease-out
ease-in-out
linear
animation-delay（動畫延遲）
讀取元素時，從「元素編號s」指定「動畫開始」的時間。例如，「5秒」持續5秒。初始值0將立即執行。
animation-iteration-count（動畫迭代計數）
#指定使用數字重複動畫的次數。 infinite要指定無限循環，請指定。
animation-direction（動畫方向）
指定重複動畫的方向。
normal ...正常方向播放（初始值）
alternate ...在正常和偶數時間以相反方向重新產生奇數次（返回並返回...）
reverse...向後播放
alternate-reverse...反向播放
#animation-play-state（動畫播放狀態）
指定動畫暫停（paused）和播放（running）。但是，似乎沒有太多使用。
animation-fill-mode（動畫填滿模式）
#指定播放動畫之前和之後的狀態。
none（預設值）
forwards..播放後保持最後一個關鍵影格的狀態
backwards...在播放前套用第一個關鍵影格的狀態
both … forwards ......向前和向後都套用
#屬性總結
animation屬性允許您分別指定每個屬性的值，用空格分隔。項目可以省略，但動畫名稱必須在執行前寫入。建議按以下順序列出。
animation-name（動畫名稱）
animation-duration（動畫持續時間）
animation-timing-function（動畫定時功能）
animation -delay（動畫延遲）
animation-iteration-count（動畫迭代計數）
animation-direction（動畫方向）
animation-fill-mode（動畫填充模式)
animation-play-state（動畫播放狀態）
body {
animation: test 5s ease 1s infinite forwards;
}# #我們來看看背景顏色改變的具體內容
@-webkit-keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
@keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}###由於此時指定整個網頁的背景顏色，body以animation指定屬性。值為“關鍵幀名稱”，bg-color“更改”在10秒內添加，“，10s”指定無限循環infinite。不要忘記webkit的版本。 background-color讓我們指定基本背景顏色作為背景色，為動畫不起作用的情況做準備。 ###body {
background-color: #e74c3c;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;
}###完整程式碼如下：###<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background-color: #e74c3c;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;
}
@-webkit-keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
@keyframes bg-color {
0% { background-color: #e74c3c; }
20% { background-color: #f1c40f; }
40% { background-color: #1abc9c; }
60% { background-color: #3498db; }
80% { background-color: #9b59b6; }
100% { background-color: #e74c3c; }
}
p {
font-family: Meiryo, "Hiragino Kaku Gothic Pro W3",sans-serif;
text-align: center;
margin-top: 150px;
color: #fff;
}
</style>
</head>
<body>
<p>php中文网</p>
</body>
</html>效果如下：
以上是css3使用animation屬性來實現背景顏色動態漸層的效果（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！