先上效果图，emmm，图是静态的，至于动态效果自己下载代码实现就好啦！
星空
设计思路
用绝对定位(position:absolute)为不同的图设置层级
动态实现用到CSS的动画效果
上代码
html代码：
星空-网页背景音乐动画
html代码很简单，就不说明什么了！主要注意一下的用法
css代码：
html,body{
margin: 0;
padding: 0;
}
audio{
z-index: 5;
position: absolute;
bottom: 0;
opacity: 0.1;
transition: all 2s linear;
}
audio:hover{
opacity: 1;
}
.wall{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
div#background{
background: url("../images/preview.jpg") no-repeat;
animation: dd 100s linear infinite;
background-size: cover;
}
div#midground{
background: url("../images/midground.png");
z-index: 1;
animation: cc 100s linear infinite ;
}
div#foreground{
background: url("../images/foreground.png");
z-index: 2;
animation: cc 153s linear infinite;
}
div#top{
background: url("../images/midground.png");
z-index: 4;
animation: da 100s linear infinite;
}
div#ship{
background: url("../images/ship.png") no-repeat;
z-index: 2;
animation: cc 50s linear infinite;
opacity: 0.6;
}
@keyframes cc {
0%{
background-position: 0 0;
}
100%{
background-position: 600% 0;
}
}
@keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
CSS这里还是有挺多值得学习的地方的，以下将分点学习：
全屏拉伸的实现
.wall{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
就是这一段代码，绝对定位把四个方向的属性值均设置为0即可实现全屏拉伸，至于原理，笔者在这里推荐一篇文章帮助大家理解啦！
z-index设置元素的堆叠
div#foreground{
background: url("../images/foreground.png");
z-index: 2;
animation: cc 153s linear infinite;
}
这里设置 z-index: 2; 可以理解为这个 div 从里到外被放在了第二层。z-index一般应该在什么时候用呢？一般是在absolute覆盖absolute时，才用z-index。
动画效果的实现
动画效果的实现主要是用到 animation 和 @keyframs，其中 animation 定义动画的名称、时间与播放的次数等；@keyframs 则是定义动画的效果
div#ship{
background: url("../images/ship.png") no-repeat;
z-index: 2;
animation: cc 50s linear infinite;
opacity: 0.6;
}
@keyframes cc {
0%{
background-position: 0 0;
}
100%{
background-position: 600% 0;
}
}
哈哈，这里还是想推荐大家看一下阮一锋写的CSS动画简介，笔记看了感觉收获颇多的。
4. 想下载源码的同学看这里！！！