多重CSS背景動畫實現(xiàn)方法示例
發(fā)布時間：2014-04-04 10:28:42 作者：佚名 
我要評論
我要評論CSS背景動畫很長時間以來都是一個熱門話題，很多時候都是因為效果特別絢麗，而且不需要額外的技術(shù)。最近有人問我是否可以給頁面上一個指定的元素安排多重背景動畫，答案是yes….雖然有些限制因素。讓我們來看看如何實現(xiàn)這個效果
CSS代碼
給一個頁面元素設(shè)置多個背景圖片，這種技術(shù)很早就可行了，你只需要用逗號把各個背景分隔開：
復(fù)制代碼
代碼如下:.animate-area {
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;
}
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;
}
需要注意的是，你希望出現(xiàn)在最上層的背景圖應(yīng)該放在圖片隊列的第一位。讓這些背景圖片動起來需要變化background-position，也是用逗號分隔：
復(fù)制代碼
代碼如下:@keyframes animatedBird {
from { background-position: 20px 20px, 30px 80px, 0 0; }
to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
.animate-area {
animation: animatedBird 4s linear infinite;
}
這樣做的結(jié)果就是三種背景在同一個元素上移動！
當(dāng)然，這樣實現(xiàn)的并不是最理想的效果，你無法單個的移動某個背景圖片的位置，它們必須保持相同的速率和持續(xù)時間。
相關(guān)文章
- 這篇文章主要介紹了css3實現(xiàn)背景圖片顏色修改的多種方式,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2021-04-13
CSS3 菱形拼圖實現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能
這篇文章主要介紹了CSS3 菱形拼圖實現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-29CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例
這篇文章主要介紹了CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例。文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一2021-03-09
前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法，感興趣的朋友跟隨小編一起看看吧2019-11-05
css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性實例演示
這篇文章主要介紹了css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性,同時對于css3背景漸變也做了詳細的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下2017-08-10CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13- 這篇文章主要介紹了CSS3對背景圖片的裁剪及尺寸和位置的設(shè)定方法,在IE瀏覽器中要注意一下兼容性,需要的朋友可以參考下2016-03-07
- 使用css3 屬性：background-size可以輕松實現(xiàn)像桌面壁紙一樣拉伸，下面為大家詳細介紹下具體的相關(guān)實現(xiàn)過程，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-19
css3背景圖片透明疊加屬性cross-fade簡介及用法實例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性，一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08CSS3系列教程:背景圖片(背景大小和多背景圖) 應(yīng)用說明
背景圖片/紋理有很多種使用方式，常常用于為添加網(wǎng)站的最佳的界面美化。現(xiàn)在它在CSS3中被重視，我們可以應(yīng)用多背景圖和背景圖片尺寸來實現(xiàn)更完美的效果,需要的朋友可以了解2012-12-19
