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

div+css实现日出东方山峰景色代码

代码语言：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,3.........完整代码请登录后点击上方下载按钮下载查看