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;
html和css书籍推荐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;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。