div+css实现一个月亮当空挂流星划过夜晚的天空的小屋动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现一个月亮当空挂流星划过夜晚的天空的小屋动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

<style>

body{
	font-family: Arial, Helvetica, sans-serif;
   background:#000;
  overflow:hidden;
}

/*===========================================================================
   2. SKY
   ========================================================================== */
#sky{
   position:absolute;
   height:85%;
   width:100%;
   z-index:0;
   background: #0957bc; /* Old browsers */
   background: -moz-linear-gradient(top, #0957bc 0%, #053c89 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0957bc), color-stop(100%,#053c89)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #0957bc 0%,#053c89 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #0957bc 0%,#053c89 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, #0957bc 0%,#053c89 100%); /* IE10+ */
   background: linear-gradient(top, #0957bc 0%,#053c89 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0957bc', endColorstr='#053c89',GradientType=0 ); /* IE6-9 */
}


#stars{
   height:100%;
   width:100%;
   background: url(//repo.bfw.wiki/bfwrepo/image/662cd23ea7deb.png) repeat 0 0;
   position:absolute;
   top:0;
   left:0;
   -webkit-animation: bgAnimation 7s infinite;
   -moz-animation: bgAnimation 7s infinite;
   -ms-animation: bgAnimation 7s infinite;
   -o-animation: bgAnimation 7s infinite;
   animation: bgAnimation 7s infinite;
   -webkit-animation-timing-function: linear;
   -moz-animation-timing-function: linear;
   -ms-animation-timing-function: linear;
   -o-animation-timing-function: linear;
   animation-timing-function: linear;

}


.asteroid{
   position:absolute;
   top:-200px;
   left:-200px;
   width:200px;
   height:200px;
   opacity:0.8;
   -webkit-animation: asteroidAnimation 5s infinite;
   -webkit-animation-timing-function:ease-in;
   -moz-animation-timing-function:ease-in;
   -ms-animation-timing-function:ease-in;
   -o-animation-timing-function:ease-in;
   animation-timing-function:ease-in;

   -webkit-animation-delay:2s;
   -moz-animation-delay:2s;
   -ms-animation-delay:2s;
   -o-animation-delay:2s;
   animation-delay:2s;
}
.asteroid-head{
   width:10px;
   height:10px;
   -webkit-border-radius:50%;
   -moz-border-radius:50%;
   border-radius:50%;
   background:#FFF;
   -webkit-box-shadow:0px 0px 7px 2px #FFF;
   -moz-box-shadow:0px 0px 7px 2px #FFF;
   box-shadow:0px 0px 7px 2px #FFF;
   position: absolute;
   bottom:0;
   right:0;
}
.asteroid-tail{
   width:0;
   height:0;
   border-left: 3px solid transparent;
   border-bottom: 200px solid #FFF;
   border-right: 3px solid transparent;
   position: absolute;
   bottom:-22px;
   right:75px;
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   transform:rotate(-45deg);
}


.a2{
   top:-205px;
   left:400px;
      -webkit-animation: asteroidAnimationTwo 6s infinite;
   -webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
-ms-animation-timing-function:ease-in;
-o-animation-timing-function:ease-in;
animation-timing-function:ease-in;

-webkit-animation-delay:4s;
-moz-animation-delay:4s;
-ms-animation-delay:4s;
-o-animation-delay:4s;
animation-delay:4s;

}


/* =============================================================================
   3. MOON
   ========================================================================== */
#moon{
   position:absolute;
   top:10%;
   right:10%;
   width:200px;
   height:200px;
   border-radius:50%;
   background:#FFFF8C;
   box-shadow:0px 0px 100px #FFFF8C;
   z-index:5;
   -webkit-animation: moonAnimation 3s infinite;
   -moz-animation: moonAnimation 3s infinite;
   -ms-animation: moonAnimation 3s infinite;
   -o-animation: moonAnimation 3s infinite;
   animation: moonAnimation 3s infinite;
}

.crater{
   position:absolute;
   top:30px;
   left:40px;
   width:25px;
   height:45px;
   background:#E3E693;
   border-top-right-radius:50px 100px;
   border-top-left-radius:50px 100px;
   border-bottom-right-radius:50px 100px;
   border-bottom-left-radius:50px 100px;
   -webkit-transform:rotate(40deg);
   -moz-transform:rotate(40deg);
   -o-transform:rotate(40deg);
   -ms-transform:rotate(40deg);
   transform:rotate(40deg);
}

.crater2{
   position:absolute;
   top:125px;
   right:20px;
   width:15px;
   height:20px;
   background:#E3E693;
   border-top-right-radius:20px 20px;
   border-top-left-radius:20px 20px;
   border-bottom-right-radius:20px 30px;
   border-bottom-left-radius:20px 30px;
   -webkit-transform:rotate(-60deg);
   -moz-transform:rotate(-60deg);
   -o-transform:rotate(-60deg);
   -ms-transform:rotate(-60deg);
   transform:rotate(-60deg);
}

.crater3{
   position:absolute;
   top:120px;
   left:60px;
   width:10px;
   height:10px;
   background:#E3E693;
   border-radius:50%;
}

.crater4{
   position:a.........完整代码请登录后点击上方下载按钮下载查看