div+css实现日出东方山峰景色代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现日出东方山峰景色代码，群山峻岭间，月亮落下，太阳升起，大雁飞行。

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
html {background: transparent;}

body {margin:0; padding:0; overflow: hidden;background: transparent;}
.night {animation: night 5s linear forwards;}


@keyframes night {
  0% {background: rgba(46,2,54,1);}
  100% {background: rgba(0,0,0,1);}
}
 

.foreground {position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(14,16,35,255);
  clip-path: polygon(0 86%, 12% 88%, 24% 89%, 32% 85%, 44% 89%, 52% 93%, 62% 89%, 75% 86%, 84% 80%, 96% 79%, 100% 77%, 100% 100%, 0 100%);}

.sky {position: absolute;


    top: 0;
    width: 100%;
    height: 50%;
background-image: linear-gradient(to bottom, rgba(243,187,156,1) 0%, rgba(253,163,72,1) 55%, rgba(246,42,54,1) 100%);
  animation: mysunrise 5s linear forwards 15s;
  opacity: 0;
}
@keyframes mysunrise {
  0% {display: none; opacity: 0;}

  100% {display: block; opacity: 1;}
}
  
  
  
@keyframes sky {
  0% {background: transparent;}
  49.9% {background: transparent;}
  50% {   background: linear-gradient(to bottom, rgba(243,7,56,1) 0%, rgba(43,3,72,1) 55%, rgba(46,2,54,1) 100%);}
}
.skyover {
  position: absolute;
  top:0;
 width: 100%;
  height: 40%;

  animation: fadesky 10s linear forwards;

  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/439415/sky1.jpg");
  background-size: cover;
}
@keyframes fadesky {
  0% {opacity: .85;}
  100% {opacity: 0;}
}

.fenceposts {position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(14,16,35,255);
  clip-path: polygon(7% 87%, 6% 72%, 5% 74%, 6% 87%, 15% 89%, 15% 70%, 16% 68%, 16% 89%, 32% 84%, 32% 70%, 33% 69%, 33% 91%, 16% 89%);
}
.fencetop {position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
 background: rgba(14,16,35,255);
clip-path: polygon(14% 72%, 5% 75%, 5% 77%, 17% 74%, 17% 73%, 15% 74%, 16% 72%, 14% 74%, 34% 73%, 34% 70%);
}

.fencebottom {position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
 background: rgba(14,16,35,255);
clip-path: polygon(16% 82%, 5% 85%, 5% 87%, 16% 84%);
}

.fencebottom {position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
 background: rgba(14,16,35,1);
clip-path: polygon(16% 83%, 5% 85%, 5% 87%, 16% 85%);
}
.fencebottom1 {position: absolute;
  bottom: -6%;
  left: 2%;
  width: 100%;
  height: 100%;
 background: rgba(14,16,35,1);
clip-path: polygon(31.5% 75%, 31.5% 71%, 17% 79%, 17% 81%, 31.5% 74%);
}

.hill1 {position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
 background: rgba(40,38,75,1);
clip-path: polygon(0 100%, 0 82%, 5% 76%, 10% 76%, 17% 78%, 25% 79%, 37% 81%, 52% 93%, 60% 85%, 72% 77%, 75% 75%, 83% 73%, 92% 76%, 96% 79%, 98% 80%, 100% 80%, 100% 100%);
}

.hill2 {position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
 background: rgba(46,49,87,1);
clip-path: polygon(0 100%, 0 72%, 7% 63%, 14% 68%, 25% 70%, 32% 75%, 38% 82%, 45% 85%, 54% 84%, 63% 79%, 69% 73%, 79% 68%, 90% 69%, 95% 68%, 98% 67%, 100% 63%, 100% 100%);}

.ocean {position: absolute;
 top: 57%;
  width: 100%;
  height: 43%;
 background-image: linear-gradient(to bottom, rgba(96, 87, 119, 1), rgba(132, 85, 116, 1));

}

.mountain {position: absolute;
 top: -38%;
  width: 100%;
  height: 100%;
  background: rgba(45,39,77,1);
  clip-path: polygon(0 100%, 0% 85%, 4% 82%, 9% 80%, 15% 74%, 19% 78%, 27% 69%, 29% 67%, 33% 66%, 37% 61%, 40% 58%, 44% 56%, 45% 56%, 52% 53%, 57% 56%, 60% 64%, 62% 61%, 64% 65%, 66% 66%, 68% 68%, 73% 72%, 78% 75%, 86% 79%, 90% 84%, 93% 87%, 96% 89%, 97% 89%, 100% 92%, 100% 100%, 0 100%, 0% 85%, 0 85%);
  animation: mountainmain 30s ease forwards;
}
@keyframes mountainmain {
  0% {background: rgba(45,39,77,1);}
  50% {background: rgba(45,39,77,1);}
  100% {background: rgba(85,79,115,1);}
}
.mountain1 {position: absolute;
 top: -26%;
 width: 100%;
 height: 100%;
 background: rgba(36,39,77,1);

 clip-path: polygon(0% 61%, 2% 62%, 3% 64%, 6% 65%, 8% 66%, 11% 68%, 14% 72%, 0% 73%);
  animation: mountain 30s ease forwards;
}

@keyframes mountain {
  0% {background: rgba(36,39,77,1);}
  50% {background: rgba(36,39,77,1);}
  100% {background: rgba(138,100,135,1);}
}
.mountain2 {position: absolute;
 top: -22%;
 width: 100%;
 height: 100%;
 background: rgba(36,39,77,1);
 clip-path: polygon(100% 62%, 97% 63%, 94% 67%, 91% 66%, 89% 65%, 86% 65%, 88% 65%, 84% 66%, 82% 67%, 80% 67%, 79% 67%, 75% 69%, 72% 72%, 69% 77%, 100% 77% );
  animation: mountain 30s ease forwards;
}

.redskylower {position: absolute;
 top: 36%;
 width: 100%;
 height: 20%;
  background: rgba(46,49,87,1);
  animation: redlower 30s ease forwards;
}

@keyframes redlower {
  0% {background: rgba(46,49,87,1);}
  50% {background: rgba(46,49,87,1);}
  100% {background: rgba(243,103,149,.65);}
}
.redskybubbles {position: absolute;
  top: 20%;
  width: 72%;
  height: 20%;
  background: rgba(36,39,77,.65);
 clip-path: polygon(0% 68%, 1% 68%, 2% 67%, 4% 67%, 5% 68%, 6% 66%, 6% 65%, 7% 62%, 8% 60%, 9% 60%, 11% 61%, 11% 57%, 11% 55%, 12% 53%, 13% 53%, 14% 53%, 14% 55%, 14% 57%, 15% 54%, 16% 53%, 17% 53%, 17% 55%, 17% 56%, 17% 59%, 17% 60%, 16% 63%, 17% 65%, 18% 66%, 19% 65%, 19% 63%, 20% 62%, 21% 62%, 21% 63%, 22% 65%, 23% 65%, 24% 66%, 26% 66%, 26% 63%, 26% 61%, 27% 59%, 27% 58%, 28% 57%, 28% 56%, 29% 57%, 30% 57%, 30% 59%, 30% 60%, 30% 62%, 31% 63%, 31% 64%, 32% 64%, 33% 63%, 34% 62%, 34% 63%, 35% 64%, 35% 66%, 35% 68%, 35% 71%, 0% 73%, 0% 69%); 
  animation: redbubbles 30s ease forwards;
}

.redskybubblesright {position: absolute;
  top: 20%;
  left: 72%;
  width: 80%;
  height: 20%;
  background: rgba(26,29,67,.65);
 clip-path: polygon(0% 68%, 1% 68%, 2% 67%, 4% 67%, 5% 68%, 6% 66%, 6% 65%, 7% 62%, 8% 60%, 9% 60%, 11% 61%, 11% 57%, 11% 55%, 12% 53%, 13% 53%, 14% 53%, 14% 55%, 14% 57%, 15% 54%, 16% 53%, 17% 53%, 17% 55%, 17% 56%, 17% 59%, 17% 60%, 16% 63%, 17% 65%, 18% 66%, 19% 65%, 19% 63%, 20% 62%, 21% 62%, 21% 63%, 22% 65%, 23% 65%, 24% 66%, 26% 66%, 26% 63%, 26% 61%, 27% 59%, 27% 58%, 28% 57%, 28% 56%, 29% 57%, 30% 57%, 30% 59%, 30% 60%, 30% 62%, 31% 63%, 31% 64%, 32% 64%, 33% 63%, 34% 62%, 34% 63%, 35% 64%, 35% 66%, 35% 68%, 35% 71%, 0% 73%, 0% 69%); 
  animation: redbubbles 30s ease forwards;
}

@keyframes redbubbles {
  0% {background: rgba(26,29,67,.65);}
  50% {background: rgba(26,29,67,.65);}
  100% {background: rgba(243,103,149,.65);}
}
.redskybubbles1 {position: absolute;
  top: 33.5%;
  width: 100%;
  height: 1.5%;
  background: rgba(46,49,87,.4);
   animation: redmiddle 30s ease forwards;
}

@keyframes redmiddle {
  0% {background: rgba(46,49,87,.45);}
  50% {background: rgba(46,49,87,.45);}
  100% {background: rgba(243,103,149,.45);}
}

.rightfenceposts {position: absolute;
  width: 100%;
  height: 100%;
  top: -2.5%;
  background: rgba(14,16,35,255);
  clip-path: polygon(53% 106%, 93% 99%, 75.8% 97%, 75.8% 70%, 75% 72%, 75% 89%, 82% 91%, 82% 74%, 82.5% 74%, 82.5% 90%, 86% 90%, 86% 77%, 86.5% 76%, 86.5% 90%, 85% 90%, 88% 89%, 88% 80%, 88.5% 80%, 88.5% 89%, 89% 89%, 64% 96%, 64% 70%, 63% 71%, 63% 96%);}

.rightfencetop {position: absolute;
  width: 100%;
  height: 90%;
  top: -13.7%;
  background: rgba(14,16,35,255);
  clip-path: polygon(62% 95.7%, 75% 96.1%, 82.5% 98%, 82.5% 96.5%, 75% 93.8%, 62.2% 92.2%, 62% 96.5%);}  
.rightfencebottom {position: absolute;
  width: 100%;
  height: 90%;
  top: 0.7%;
  .........完整代码请登录后点击上方下载按钮下载查看