CSS3 Animation制作飘动的浮云和星星效果
帶平行視差效果的星星
先看效果：
如果下方未出現(xiàn)效果也可前往這里查看?http://sandbox.runjs.cn/show/0lz3sl9y
?
下面我們利用CSS3的animation寫出這樣的動(dòng)畫來(lái)，要點(diǎn)就是：
- 用動(dòng)畫不停改變背景圖片位置;
- 動(dòng)畫高為無(wú)限循環(huán);
在頁(yè)面放三個(gè)DIV，首先將他們大小鋪滿整個(gè)窗口，這點(diǎn)是通過將其position設(shè)為absolute然后分別設(shè)置上左下右四個(gè)方面距離為0px達(dá)到的。
<!doctype html> <html><head><title>Moving stars</title><style type="text/css">html,body{margin: 0;}.wall{position: absolute;top: 0;left: 0;bottom: 0;right: 0;}div#background{background: black url('img/background.png') repeat-x 5% 0%;}div#midground{background:url('img/midground.png')repeat 20% 0%;z-index: 1;}div#foreground{background:url('img/foreground.png')repeat 35% 0%;z-index: 2;}</style></head><body><div id="background" class="wall"></div><div id="midground" class="wall"></div><div id="foreground" class="wall"></div></body> </html>?
然后定義的們的動(dòng)畫，讓背景圖片的位置從開始的0%變化到600%，注意我們只改變x方向的位置，y保持0%不變，因?yàn)槲覀兿胍男Ч撬揭苿?dòng)，所以y方向無(wú)變化。
@-webkit-keyframes STAR-MOVE {from {background-position:0% 0%}to {background-position: 600% 0%} } @keyframes STAR-MOVE {from {background-position: 0% 0%}to {background-position: 600% 0%} }?
最后一步便是將動(dòng)畫關(guān)鍵幀應(yīng)用到三個(gè)充當(dāng)背景的DIV上。
div#background {background: black url('img/background.png') repeat-x 5% 0%; -webkit-animation: STAR-MOVE 200s linear infinite;-moz-animation: STAR-MOVE 200s linear infinite;-ms-animation: STAR-MOVE 200s linear infinite;animation: STAR-MOVE 200s linear infinite; } div#midground {background: url('img/midground.png')repeat 20% 0%;z-index: 1;-webkit-animation: STAR-MOVE 100s linear infinite;-moz-animation: STAR-MOVE 100s linear infinite;-ms-animation: STAR-MOVE 100s linear infinite;animation: STAR-MOVE 100s linear infinite; } div#foreground {background: url('img/foreground.png')repeat 35% 0%;z-index: 2;-webkit-animation: STAR-MOVE 50s linear infinite;-moz-animation: STAR-MOVE 50s linear infinite;-ms-animation: STAR-MOVE 50s linear infinite;animation: STAR-MOVE 50s linear infinite; }?
飄動(dòng)的浮云
如果把上面的星星圖片換成云彩，那就成了飄動(dòng)的浮云了。
代碼需要小的改動(dòng)，就是背景層需要設(shè)置background-size為cover，這樣才能讓藍(lán)天鋪滿窗口。
div#background {background: black url('img/background.png') repeat-x 5% 0%;background-size: cover;-webkit-animation: STAR-MOVE 200s linear infinite;-moz-animation: STAR-MOVE 200s linear infinite;-ms-animation: STAR-MOVE 200s linear infinite;animation: STAR-MOVE 200s linear infinite; }?
下面嵌入的貌似效果不太好，還是打開鏈接全屏查看吧，http://sandbox.runjs.cn/show/zgvynqhj。
?
代碼下載
?度娘盤：http://pan.baidu.com/s/1sj0KHmX
REFERENCE
http://css-tricks.com/examples/StarryNightCSS3/
http://www.techumber.com/2013/12/amazing-glitter-star-effect-using-pure-css3.html
轉(zhuǎn)載于:https://www.cnblogs.com/Wayou/p/movingstats.html
總結(jié)
以上是生活随笔為你收集整理的CSS3 Animation制作飘动的浮云和星星效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 控制寄存器：指令指针寄存器IP：存放下一
- 下一篇： CSS 基本样式