HTML+CSS实现自己的动态星空
2019-03-30 本文已影响94人
Game0ver
先上效果图，emmm，图是静态的，至于动态效果自己下载代码实现就好啦！
星空
设计思路
- 用绝对定位（position:absolute）为不同的图设置层级
- 动态实现用到CSS的动画效果
上代码
- html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星空-网页背景音乐动画</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- music -->
<audio controls autoplay>
<source src="mp3/安瀬聖%20-%20静謐.mp3" autoplay="autoplay" loop="loop">
</audio>
<div id="background" class="wall"></div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>
<div id="ship" class="wall"></div>
</body>
</html>
html代码很简单，就不说明什么了！主要注意一下<audio>的用法
- css代码：
html,body{
margin: 0;
padding: 0;
}
audio{
z-index: 5;
position: absolute;
bottom: 0;
/* 设置元素的不透明度 */
opacity: 0.1;
/* 过渡，2s透明度从1过渡到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");
/* 设置元素的堆叠，高的在低的前面（DIV之间堆叠起来） */
z-index: 2;
/* linear表示匀速、infinite表示让动画无限次播放 */
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; /* 一般是在absolute覆盖absolute时，才用z-index */
animation: cc 50s linear infinite;
opacity: 0.6;
}
/* 定义动画的效果，名字叫cc */
@keyframes cc {
0%{/* 动画的开始 */
background-position: 0 0; /* 动画开始时，背景的位置 */
}
100%{/* 动画的结束 */
/* 为什么设置时间那么长和结束位置那么远呢。因为这样可以让水平和竖直方向的动画落差更明显 */
background-position: 600% 0;
}
}
@keyframes da {
0%{
background-position: 0 0;
}
100%{
/* 相同的时间，不同的结束位置，动画的速度会不一样，根据公式v=s/t */
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");
/* 设置元素的堆叠，高的在低的前面（DIV之间堆叠起来） */
z-index: 2;
/* linear表示匀速、infinite表示让动画无限次播放 */
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; /* 一般是在absolute覆盖absolute时，才用z-index */
animation: cc 50s linear infinite;
opacity: 0.6;
}
/* 定义动画的效果，名字叫cc */
@keyframes cc {
0%{/* 动画的开始 */
background-position: 0 0; /* 动画开始时，背景的位置 */
}
100%{/* 动画的结束 */
/* 为什么设置时间那么长和结束位置那么远呢。因为这样可以让水平和竖直方向的动画落差更明显 */
background-position: 600% 0;
}
}
哈哈，这里还是想推荐大家看一下阮一锋写的CSS动画简介，笔记看了感觉收获颇多的。
4. 想下载源码的同学看这里！！！
链接：https://pan.baidu.com/s/1tiuHEk_dWw8J0sd66Cl3Gw
提取码：u8ld
