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:absolute;
   top:90px;
   right:90px;
   width:10px;
   height:10px;
   background:#E3E693;
   border-radius:50%;
}

.crater5{
   position:absolute;
   top:50px;
   left:120px;
   width:30px;
   height:35px;
   background:#E3E693;
   border-radius:50%;
   -webkit-transform:rotate(120deg);
   -moz-transform:rotate(120deg);
   -o-transform:rotate(120deg);
   -ms-transform:rotate(120deg);
   transform:rotate(120deg);
}

.crater6{
   position:absolute;
   bottom:15px;
   left:80px;
   width:15px;
   height:15px;
   background:#E3E693;
   border-radius:50%;
}

.crater7{
   position:absolute;
   bottom:15px;
   left:130px;
   width:5px;
   height:5px;
   background:#E3E693;
   border-radius:50%;
}



/* =============================================================================
   4. TREES
   ========================================================================== */
.tuja{
   width:30px;
   height:150px;
   background:#000;
   position:absolute;
   bottom:-10px;
   left:10%;
   border-top-right-radius:20px 100px;
   border-top-left-radius:20px 100px;
   border-bottom-right-radius:20px 100px;
   border-bottom-left-radius:20px 100px;
   z-index:10;
}

.two{
   left:15%;
}


/* =============================================================================
   5. ALIEN
   ========================================================================== */
#cover{
   position:absolute;
   right:10%;
   bottom:-70px;
   height:70px;
   width:70px;
   background:#000;
}
#alien{
   position:absolute;
   right:10%;
   bottom:-70px;
   background:#000;
   width:50px;
   height:70px;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-left-radius:100px 150px;
   border-bottom-right-radius:100px 150px;

   -webkit-animation: alienAnimation 10s infinite;
   -moz-animation: alienAnimation 10s infinite;
   -ms-animation: alienAnimation 10s infinite;
   -o-animation: alienAnimation 10s infinite;
   animation: alienAnimation 10s infinite;
}

#alien:before{
   content:' ';
   position:absolute;
   left:-5px;
   top:0px;
   width:60px;
   height:60px;
   background:#000;
   border-top-left-radius: 100px;
   border-top-right-radius: 100px;
   border-bottom-left-radius:100px 150px;
   border-bottom-right-radius:100px 150px;
}

.eye{
   background: rgba(243, 225, 5, 0.3);
   position:absolute;
   top:15px;
   left:5px;
   width:15px;
   height:15px;
   border-top-right-radius:15px 10px;
   border-top-left-radius:2px;
   border-bottom-left-radius:15px 10px;
   border-bottom-right-radius:3px;
}

.eyeR{
   background: rgba(243, 225, 5, 0.3);
   position:absolute;
   top:15px;
   right:5px;
   width:15px;
   height:15px;
   border-top-left-radius:15px 10px;
   border-top-right-radius:2px;
   border-bottom-right-radius:15px 10px;
   border-bottom-left-radius:3px;
}

/* =============================================================================
   6. GRASS
   ========================================================================== */

/*---------- Right radius grass -----------*/
.grass{
   position:absolute;
   bottom:0;
   left:3%;
   height:20px;
   width:10px;
   border-left:5px solid #000;
   border-right:0;
   border-bottom:0;
   border-top-left-radius:50px 200px;
   border-top-right-radius:0px;
   z-index:5;

   -webkit-animation: grassAnimation 2s infinite;
   -moz-animation: grassAnimation 2s infinite;
   -ms-animation: grassAnimation 2s infinite;
   -o-animation: grassAnimation 2s infinite;
   animation: grassAnimation 2s 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;
}

.g1{left:5%;   height:26px;}
.g2{left:8%;   height:16px;}
.g3{left:10%;  height:22px;}
.g4{left:15%;  height:18px;}
.g5{left:16%;  height:26px;}
.g6{left:20%;  height:20px;}
.g7{left:23%;  height:22px;}
.g8{left:27%;  height:26px;}
.g9{left:33%;  height:17px;}
.g10{left:37%; height:24px;}
.g11{left:39%; height:26px;}
.g12{left:42%; height:16px;}
.g13{left:45%; height:22px;}
.g14{left:48%; height:18px;}
.g15{left:50%; height:26px;}
.g16{left:53%; height:20px;}
.g17{left:58%; height:22px;}
.g18{left:60%; height:26px;}
.g19{left:62%; height:17px;}
.g20{left:65%; height:24px;}
.g21{left:67%;  height:26px;}
.g22{left:68%;  height:16px;}
.g23{left:70%; height:22px;}
.g24{left:72%; height:18px;}
.g25{left:74%; height:26px;}
.g26{left:75%; height:20px;}
.g27{left:78%; height:22px;}
.g28{left:80%; height:26px;}
.g29{left:82%; height:17px;}
.g30{left:83%; height:24px;}
.g31{left:85%; height:26px;}
.g32{left:87%; height:16px;}
.g33{left:89%; height:22px;}
.g34{left:91%; height:18px;}
.g35{left:92%; height:26px;}
.g36{left:94%; height:20px;}
.g37{left:96%; height:22px;}
.g38{left:97%; height:26px;}
.g39{left:99%; height:17px;}
.g40{left:100%; height:24px;}

/*---------- Left radius grass -----------*/
.grassL{
   position:absolute;
   bottom:0;
   left:3%;
   height:20px;
   width:10px;.........完整代码请登录后点击上方下载按钮下载查看