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;
   border-right:5px solid #000;
   border-left:0;
   border-bottom:0;
   border-top-right-radius:50px 200px;
   border-top-left-radius:0px;
   z-index:5;


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

   -webkit-animation-delay:3s;
-moz-animation-delay:3s;
-ms-animation-delay:3s;
-o-animation-delay:3s;
animation-delay:3s;
}

.gL1{left:1%;   height:26px;}
.gL2{left:3%;   height:16px;}
.gL3{left:4%;  height:22px;}
.gL4{left:6%;  height:18px;}
.gL5{left:8%;  height:26px;}
.gL6{left:11%;  height:20px;}
.gL7{left:12%;  height:22px;}
.gL8{left:15%;  height:26px;}
.gL9{left:17%;  height:17px;}
.gL10{left:19%; height:24px;}
.gL11{left:22%; height:26px;}
.gL12{left:26%; height:16px;}
.gL13{left:27%; height:22px;}
.gL14{left:29%; height:18px;}
.gL15{left:30%; height:26px;}
.gL16{left:33%; height:20px;}
.gL17{left:35%; height:22px;}
.gL18{left:37%; height:26px;}
.gL19{left:40%; height:17px;}
.gL20{left:43%; height:24px;}
.gL21{left:48%;  height:26px;}
.gL22{left:51%;  height:16px;}
.gL23{left:53%; height:22px;}
.gL24{left:56%; height:18px;}
.gL25{left:58%; height:26px;}
.gL26{left:60%; height:20px;}
.gL27{left:62%; height:22px;}
.gL28{left:64%; height:26px;}
.gL29{left:66%; height:17px;}
.gL30{left:68%; height:24px;}
.gL31{left:71%; height:26px;}
.gL32{left:73%; height:16px;}
.gL33{left:76%; height:22px;}
.gL34{left:79%; height:18px;}
.gL35{left:81%; height:26px;}
.gL36{left:83%; height:20px;}
.gL37{left:85%; height:22px;}
.gL38{left:88%; height:26px;}
.gL39{left:90%; height:17px;}
.gL40{left:93%; height:24px;}
.gL41{left:95%; height:24px;}
.gL42{left:97%; height:24px;}


/* =============================================================================
   7. HOUSE
   ========================================================================== */
#house{
   position: absolute;
   bottom:0;
   left:25%;
   width:350px;
   height:150px;
   background:#000;
   z-index:10;
}

#roof{
   width:0;
   height:0;
   border-left: 230px solid transparent;
   border-bottom: 130px solid #000;
   border-right: 230px solid transparent;
   position: absolute;
   top:-120px;
   left:-50px;
}

.window{
   position:absolute;
   top:20px;
   left:60px;
   width:50px;
   height:70px;
   background-color: rgba(243, 225, 5, 0.5);
   border:3px solid #000;
   box-shadow:0px 0px 60px rgba(243, 225, 5, 0.3);
   -webkit-animation: windowAnimation 3s infinite;
   -moz-animation: windowAnimation 3s infinite;
   -ms-animation: windowAnimation 3s infinite;
   -o-animation: windowAnimation 3s infinite;
   animation: windowAnimation 3s infinite;

}

.line1{
   position:absolute;
   left:24px;
   width:3px;
   height:70px;
   background:#000;
}
.line2{
   position:absolute;
   top:34px;
   width:50px;
   height:3px;
   background:#000;
}


/* =============================================================================
   8. ANIMATIONS
   ========================================================================== */

@keyframes "bgAnimation" {
 0% {
    background-position: 0px 0;
 }
 50% {
    background-position: 50px 0;
 }
 100% {
    background-position: 0px 0;
 }

}

@-moz-keyframes bgAnimation {
 0% {
   background-position: 0px 0;
 }
 50% {
   background-position: 50px 0;
 }
 100% {
   background-position: 0px 0;
 }

}

@-webkit-keyframes "bgAnimation" {
 0% {
   background-position: 0px 0;
 }
 50% {
   background-position: 50px 0;
 }
 100% {
   background-position: 0px 0;
 }

}

@-ms-keyframes "bgAnimation" {
 0% {
   background-position: 0px 0;
 }
 50% {
   background-position: 50px 0;
 }
 100% {
   background-position: 0px 0;
 }

}

@-o-keyframes "bgAnimation" {
 0% {
   background-position: 0px 0;
 }
 50% {
   background-position: 50px 0;
 }
 100% {
   background-position: 0px 0;
 }
}

/*****************************************/
@keyframes "windowAnimation" {
 0% {
    -webkit-box-shadow: 0px 0px 40px #FF0;
      -moz-box-shadow: 0px 0px 40px #FF0;
      box-shadow: 0px 0px 40px #FF0;
 }
 50% {
    -webkit-box-shadow: 0px 0px 60px #FF0;
      -moz-box-shadow: 0px 0px 60px #FF0;
      box-shadow: 0px 0px 60px #FF0;
 }
 100% {
    -webkit-box-shadow: 0px 0px 40px #FF0;
      -moz-box-shadow: 0px 0px 40px #FF0;
      box-shadow: 0px 0px 40px #FF0;
 }

}

@-moz-keyframes windowAnimation {
 0% {
   -moz-box-shadow: 0px 0px 40px #FF0;
   box-shadow: 0px 0px 40px #FF0;
 }
 50% {
   -moz-box-shadow: 0px 0px 60px #FF0;
   box-shadow: 0px 0px 60px #FF0;
 }
 100% {
   -moz-box-shadow: 0px 0px 40px #FF0;
   box-shadow: 0px 0px 40px #FF0;
 }

}

@-webkit-keyframes "windowAnimation" {
 0% {
   -webkit-box-shado.........完整代码请登录后点击上方下载按钮下载查看