文章出處

帶平行視差效果的星星

先看效果：

如果下方未出現效果也可前往這里查看 http://sandbox.runjs.cn/show/0lz3sl9y

下面我們利用CSS3的animation寫出這樣的動畫來，要點就是：

用動畫不停改變背景圖片位置;
動畫高為無限循環;

在頁面放三個DIV，首先將他們大小鋪滿整個窗口，這點是通過將其position設為absolute然后分別設置上左下右四個方面距離為0px達到的。

<!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>

然后定義的們的動畫，讓背景圖片的位置從開始的0%變化到600%，注意我們只改變x方向的位置，y保持0%不變，因為我們想要的效果是水平移動，所以y方向無變化。

@-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%
	}
}

最后一步便是將動畫關鍵幀應用到三個充當背景的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;
}

飄動的浮云

如果把上面的星星圖片換成云彩，那就成了飄動的浮云了。

代碼需要小的改動，就是背景層需要設置background-size為cover，這樣才能讓藍天鋪滿窗口。

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