欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

多重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;
}

需要注意的是,你希望出現(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)文章

最新評論