@keyframes規(guī)則實(shí)現(xiàn)多重背景的CSS動(dòng)畫
我要評(píng)論定義和用法
通過(guò) @keyframes 規(guī)則，您能夠創(chuàng)建動(dòng)畫。
創(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)畫的開(kāi)始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
注釋：請(qǐng)使用動(dòng)畫屬性來(lái)控制動(dòng)畫的外觀，同時(shí)將動(dòng)畫與選擇器綁定。
語(yǔ)法
- @keyframes animationname {keyframes-selector {css-styles;}}
多重背景動(dòng)畫
CSS背景動(dòng)畫在很長(zhǎng)時(shí)間內(nèi)一直是一個(gè)熱門話題，主要因?yàn)椴恍枰~外的元素，看起來(lái)效果也不錯(cuò)。如果是有多重背景的CSS動(dòng)畫呢，下面我們來(lái)看下是如何實(shí)現(xiàn)的。
先上個(gè)效果圖：
CSS代碼
- @keyframes animatedBird {
- from {
- background-position: 20px 20px, 30px 80px, 0 0;
- }
- to {
- background-position: 300px -90px, 30px 20px, 100% 0;
- }
- }
- @-webkit-keyframes animatedBird {
- from {
- background-position: 20px 20px, 30px 80px, 0 0;
- }
- to {
- background-position: 300px -90px, 30px 20px, 100% 0;
- }
- }
- @-ms-keyframes animatedBird {
- from {
- background-position: 20px 20px, 30px 80px, 0 0;
- }
- to {
- background-position: 300px -90px, 30px 20px, 100% 0;
- }
- }
- @-moz-keyframes animatedBird {
- from {
- background-position: 20px -90px, 30px 80px, 0 0;
- }
- to {
- background-position: 300px -90px, 30px 20px, 100% 0;
- }
- }
- .animate-area2 {
- width: 560px;
- height: 190px;
- background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);
- background-position: 20px -90px, 30px 80px, 0px 0px;
- background-repeat: no-repeat, no-repeat, repeat-x;
- animation: animatedBird 4s linear infinite;
- -ms-animation: animatedBird 4s linear infinite;
- -moz-animation: animatedBird 4s linear infinite;
- -webkit-animation: animatedBird 4s linear infinite;
- overflow: hidden;
- }
HTML代碼
- <div class="animate-area2"></div>
demo演示地址:http://www.zjgsq.com/example?pid=1198
相關(guān)文章
詳解CSS動(dòng)畫屬性關(guān)鍵幀keyframes全解析
這篇文章主要介紹了詳解CSS動(dòng)畫屬性關(guān)鍵幀keyframes全解析的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-09CSS3 @keyframes簡(jiǎn)單動(dòng)畫實(shí)現(xiàn)
這篇文章主要介紹了CSS3 @keyframes簡(jiǎn)單動(dòng)畫實(shí)現(xiàn)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-24CSS3中的@keyframes關(guān)鍵幀動(dòng)畫的選擇器綁定
@keyframes可以幫助我們進(jìn)行類似Flash中的關(guān)鍵幀動(dòng)畫制作,這里我們來(lái)簡(jiǎn)單討論一下CSS3中的@keyframes關(guān)鍵幀動(dòng)畫的選擇器綁定,需要的朋友可以參考下2016-06-13- CSS3新增動(dòng)畫屬性“@keyframes”，從字面就可以看出其含義——關(guān)鍵幀，這與Flash中的含義一致。利用CSS3制作動(dòng)畫效果其原理與Flash一樣，我們需要定義關(guān)鍵幀處的狀態(tài)效果，2014-09-02
快速解決css使用@keyframes加載圖片首次循環(huán)時(shí)出現(xiàn)白色間隙問(wèn)題(閃屏)
這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時(shí)出現(xiàn)白色間隙問(wèn)題(閃屏),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以2020-02-25
