當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS3 Animation制作飘动的浮云和星星效果

發(fā)布時(shí)間：2025/3/15 CSS 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3 Animation制作飘动的浮云和星星效果小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

帶平行視差效果的星星

先看效果：

如果下方未出現(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：控制寄存器：指令指针寄存器IP：存放下一
下一篇： OpenCV在VS2005下的配置