动态星空html设计作品,HTML+CSS实现自己的动态星空

先上效果图，emmm，图是静态的，至于动态效果自己下载代码实现就好啦！

星空

设计思路

用绝对定位(position:absolute)为不同的图设置层级

动态实现用到CSS的动画效果

上代码

html代码：

星空-网页背景音乐动画

html代码很简单，就不说明什么了！主要注意一下的用法

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. 想下载源码的同学看这里！！！