css3中怎么使用animation屬性實現(xiàn)背景顏色動態(tài)漸變的效果

本篇內容主要講解“css3中怎么使用animation屬性實現(xiàn)背景顏色動態(tài)漸變的效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css3中怎么使用animation屬性實現(xiàn)背景顏色動態(tài)漸變的效果”吧!

　　首先我們來看一下CSS3關鍵幀動畫的基礎知識

　　什么是關鍵幀？

　　關鍵幀(傳遞點)是在動畫中定義更改的幀。我們@keyframes定義元素如何隨每個關鍵幀而變化。為了使動畫與其關鍵幀匹配，您需要將@keyframes規(guī)則的名稱與為元素指定的animation-name屬性的名稱相匹配。

　　@keyframes規(guī)則的名稱聲明為“ @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指定中定義的名稱。如果未指定此項，則不會執(zhí)行動畫。此外，如果指定的動畫名稱與任何關鍵幀都不匹配，則不會執(zhí)行該關鍵幀。

　　animation-duration(動畫持續(xù)時間)

　　通過“秒+ s”指定執(zhí)行一個動畫的時間長度。例如，“5秒”持續(xù)5秒。如果為0，則不會執(zhí)行。即使指定了負值，也會將其視為0。

　　animation-timing-function(動畫定時功能)

　　指定動畫的時間以及如何繼續(xù)。您可以通過調整動畫進度速度的比例來表達平滑運動。

　　ease(初期値)

　　ease-in

　　ease-out

　　ease-in-out

　　linear

　　animation-delay(動畫延遲)

　　讀取元素時，從“元素編號+ s”指定“動畫開始”的時間。例如，“5秒”持續(xù)5秒。初始值0將立即執(zhí)行。

　　animation-iteration-count(動畫迭代計數(shù))

　　指定使用數(shù)字重復動畫的次數(shù)。infinite要指定無限循環(huán)，請指定。

　　animation-direction(動畫方向)

　　指定重復動畫的方向。

　　normal ...正常方向播放(初始值)

　　alternate ...在正常和偶數(shù)時間以相反方向重新生成奇數(shù)次(返回并返回...)

　　reverse...向后播放

　　alternate-reverse...反向播放

　　animation-play-state(動畫播放狀態(tài))

　　指定動畫暫停(paused)和播放(running)。但是，似乎沒有太多使用。

　　animation-fill-mode(動畫填充模式)

　　指定播放動畫之前和之后的狀態(tài)。

　　none(默認值)

　　forwards..播放后保持最后一個關鍵幀的狀態(tài)

　　backwards...在播放前應用第一個關鍵幀的狀態(tài)

　　both … forwards ......向前和向后都應用

　　屬性總結

　　animation屬性允許您分別指定每個屬性的值，用空格分隔。項目可以省略，但動畫名稱必須在執(zhí)行前寫入。建議按以下順序列出。

　　animation-name(動畫名)

　　animation-duration(動畫持續(xù)時間)

　　animation-timing-function(動畫定時功能)

　　animation-delay(動畫延遲)

　　animation-iteration-count(動畫迭代計數(shù))

　　animation-direction(動畫方向)

　　animation-fill-mode(動畫填充模式)

　　animation-play-state(動畫播放狀態(tài))body {

　　animation: test 5s ease 1s infinite forwards;

　　}

　　下面我們來看看背景顏色改變的具體內容

　　在了解了基礎的知識之后，我們來詳細看看具體的實現(xiàn)方法。首先，將關鍵幀的名稱設置為“bg - color”，并將背景顏色設置為從0到100％的過渡。如果將相同的顏色設置為0％和100％，則在循環(huán)動畫時它會平滑移動。我們還將描述您為基于Webkit的瀏覽器啟用的版本。@-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; }

　　}

　　由于此時指定整個網(wǎng)頁的背景顏色，body以animation指定屬性。值為“關鍵幀名稱”，bg-color“更改”在10秒內添加，“，10s”指定無限循環(huán)infinite。不要忘記webkit的版本。background-color讓我們指定基本背景顏色作為背景色，為動畫不起作用的情況做準備。body {

　　background-color: #e74c3c;

　　animation: bg-color 10s infinite;

　　-webkit-animation: bg-color 10s infinite;

　　}

　　完整代碼如下：

　　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;

　　}

到此，相信大家對“css3中怎么使用animation屬性實現(xiàn)背景顏色動態(tài)漸變的效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！