這篇“css中keyframes指的是什么意思”除了程序員外大部分人都不太理解,今天小編為了讓大家更加理解“css中keyframes指的是什么意思”,給大家總結(jié)了以下內(nèi)容,具有一定借鑒價值,內(nèi)容詳細(xì)步驟清晰,細(xì)節(jié)處理妥當(dāng),希望大家通過這篇文章有所收獲,下面讓我們一起來看看具體內(nèi)容吧。
創(chuàng)新互聯(lián)公司專注于振安網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供振安營銷型網(wǎng)站建設(shè),振安網(wǎng)站制作、振安網(wǎng)頁設(shè)計、振安網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù),打造振安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供振安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言,主要是用來設(shè)計網(wǎng)頁的樣式,使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中,而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定,從而實現(xiàn)級聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁,也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。
在css中,keyframes的意思為“關(guān)鍵幀”,是一種創(chuàng)建動畫的css規(guī)則,它可以定義一個CSS動畫的一個周期的行為;可通過沿動畫序列建立關(guān)鍵幀來指定動畫序列循環(huán)期間的中間步驟。
CSS @keyframes規(guī)則
@keyframes規(guī)則用于指定動畫規(guī)則,定義一個CSS動畫的一個周期的行為。
定義動畫,必須從@keyframes規(guī)則開始。@keyframe規(guī)則由關(guān)鍵字“@keyframes”組成,后跟一個標(biāo)識符,給出動畫的名稱(將使用animation-name引用),然后是一組樣式規(guī)則(用大括號分隔)。然后,通過使用標(biāo)識符作為“animation-name”屬性的值,將動畫應(yīng)用于元素。
語法:
@keyframes animation-name {keyframes-selector {css-styles;}}
說明:
創(chuàng)建動畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。在動畫過程中,您能夠多次改變這套 CSS 樣式。以百分比來規(guī)定改變發(fā)生的時間,或者通過關(guān)鍵詞 "from" 和 "to",等價于 0% 和 100%。0% 是動畫的開始時間,100% 動畫的結(jié)束時間。為了獲得很好的瀏覽器支持,您應(yīng)該始終定義 0% 和 100% 選擇器。
注釋:請使用動畫屬性來控制動畫的外觀,同時將動畫與選擇器綁定。
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> @import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic); body { background-color: #F5F5F5; color: #555; font-size: 1.1em; font-family: 'Gentium Basic', serif; } .container { margin: 50px auto; min-width: 320px; max-width: 500px; } .text { font-size: 3em; font-weight: bold; color: #0099cc; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-animation: fall 4s infinite; animation: fall 4s infinite; } @-webkit-keyframes fall { from, 15% { -webkit-transform: rotate(0) translateX(0); transform: rotate(0) translateX(0); opacity: 1; -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); } 50%, 60% { -webkit-transform: rotate(90deg) translateX(0); transform: rotate(90deg) translateX(0); opacity: 1; -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1); animation-timing-function: cubic-bezier(.13, .84, .82, 1); } 85%, to { -webkit-transform: rotate(90deg) translateX(200px); transform: rotate(90deg) translateX(200px); opacity: 0; } } @keyframes fall { from, 15% { -webkit-transform: rotate(0) translateX(0); transform: rotate(0) translateX(0); opacity: 1; -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); animation-timing-function: cubic-bezier(.07, 2.02, .67, .57); } 50%, 60% { -webkit-transform: rotate(90deg) translateX(0); transform: rotate(90deg) translateX(0); opacity: 1; -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1); animation-timing-function: cubic-bezier(.13, .84, .82, 1); } 85%, to { -webkit-transform: rotate(90deg) translateX(200px); transform: rotate(90deg) translateX(200px); opacity: 0; } } </style> </head> <body style="text-align: center"> <div class="container"> <p class="text">Falling Text</p> </div> </body> </html>
效果圖:
感謝你的閱讀,希望你對“css中keyframes指的是什么意思”這一關(guān)鍵問題有了一定的理解,具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會,快去試試吧,如果想閱讀更多相關(guān)知識點的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)頁名稱:css中keyframes指的是什么意思-創(chuàng)新互聯(lián)
URL標(biāo)題:http://bm7419.com/article44/dsdiee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、商城網(wǎng)站、網(wǎng)站改版、Google、小程序開發(fā)、營銷型網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容