溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中@keyframes規(guī)則的使用方法

發(fā)布時(shí)間：2021-02-26 11:02:39 來(lái)源：億速云 閱讀：341 作者：清風(fēng) 欄目：開發(fā)技術(shù)

本文將為大家詳細(xì)介紹“css中@keyframes規(guī)則的使用方法”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“css中@keyframes規(guī)則的使用方法”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

css是什么意思

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

@keyframes是CSS的一種規(guī)則，可以用于定義CSS動(dòng)畫的一個(gè)周期的行為；需要和animation屬性一起使用，創(chuàng)建簡(jiǎn)單的動(dòng)畫效果。請(qǐng)使用動(dòng)畫屬性來(lái)控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。

css @keyframes規(guī)則怎么用？

通過(guò) @keyframes 規(guī)則，能夠創(chuàng)建動(dòng)畫。

語(yǔ)法

@keyframes animationname {keyframes-selector {css-styles;}}

animationname：必需的。定義animation的名稱。

keyframes-selector：必需的。動(dòng)畫持續(xù)時(shí)間的百分比。

　合法值：

　●　0-100%

　●　from (和0%相同)

　●　to (和100%相同)

css-styles必需的。一個(gè)或多個(gè)合法的CSS樣式屬性

說(shuō)明：

創(chuàng)建動(dòng)畫的原理是：將一套 CSS 樣式逐漸變化為另一套樣式。在動(dòng)畫過(guò)程中，能夠多次改變這套 CSS 樣式。

以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。

注釋：請(qǐng)使用動(dòng)畫屬性來(lái)控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。

css @keyframes屬性 示例

<!DOCTYPE html><html><head><meta charset="utf-8"> <style> div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari and Chrome */}@keyframes mymove{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}@-webkit-keyframes mymove /* Safari and Chrome */{0%   {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}</style></head><body><p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的瀏覽器.</p><div></div></body></html>

如果你能讀到這里，小編希望你對(duì)“css中@keyframes規(guī)則的使用方法”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手