SVG的自然景观平面CSS动画

下载代码

html

css

分享到微信朋友圈

html

css

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

/*
  * Sky
  * ----
  */

#sky {
    position: absolute;
    width: 100%;
    height: 80%;
    background: #CEF3F1;
  }

#clouds {
      height: 30%;
      width: 100%;
      position: relative;
    }

/* General */
        #cloud_line, 
        #cloud_circle {
          stroke-linecap: round;
          stroke-width: 50px;
          stroke: #fff;
        }

#cloud #cloud_circle:nth-of-type(2) {
          -webkit-transform: translateX(260px);
              -ms-transform: translateX(260px);
                  transform: translateX(260px);
        }

#cloud #cloud_circle:nth-of-type(3) {
          -webkit-transform: translateX(320px);
              -ms-transform: translateX(320px);
                  transform: translateX(320px);
        }

/* Specific */
        #secondClouds {
          -webkit-transform: translate(1200px, 350px) scaleY(-1);
              -ms-transform: translate(1200px, 350px) scaleY(-1);
                  transform: translate(1200px, 350px) scaleY(-1);
          -webkit-animation: second-clouds-showing 6s linear 0s 1 both,;
                  animation: second-clouds-showing 6s linear 0s 1 both, 
        }

@-webkit-keyframes second-clouds-showing {
          from, 99% { opacity: 0; }
          to { opacity: 1; };
        }

@keyframes second-clouds-showing {
          from, 99% { opacity: 0; }
          to { opacity: 1; };
        }

#cloud1 {
          -webkit-animation: cloud1-moving 28.8s linear 0s infinite both;
                  animation: cloud1-moving 28.8s linear 0s infinite both;
        }

@-webkit-keyframes cloud1-moving {
          from { -webkit-transform: translate(1300px, 100px); transform: translate(1300px, 100px); opacity: 0; }
          10%, 50%, 90% { opacity: .7; }
          to { -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); opacity: 0; };
        }

@keyframes cloud1-moving {
          from { -webkit-transform: translate(1300px, 100px); transform: translate(1300px, 100px); opacity: 0; }
          10%, 50%, 90% { opacity: .7; }
          to { -webkit-transform: translate(100px, 100px); transform: translate(100px, 100px); opacity: 0; };
        }

#cloud2 {
          -webkit-animation: cloud2-moving 29.6s linear 0s infinite both;
                  animation: cloud2-moving 29.6s linear 0s infinite both;
        }

@-webkit-keyframes cloud2-moving {
          from { -webkit-transform: scale(0.9) translate(1200px, 200px) rotateY(180deg); transform: scale(0.9) translate(1200px, 200px) rotateY(180deg); opacity: 0; }
          10%, 50%, 90% { opacity: .8; }
          to { -webkit-transform: scale(0.9) translate(300px, 200px) rotateY(180deg); transform: scale(0.9) translate(300px, 200px) rotateY(180deg); opacity: 0; };
        }

@keyframes cloud2-moving {
          from { -webkit-transform: scale(0.9) translate(1200px, 200px) rotateY(180deg); transform: scale(0.9) translate(1200px, 200px) rotateY(180deg); opacity: 0; }
          10%, 50%, 90% { opacity: .8; }
          to { -webkit-transform: scale(0.9) translate(300px, 200px) rotateY(180deg); transform: scale(0.9) translate(300px, 200px) rotateY(180deg); opacity: 0; };
        }

#cloud3 {
          -webkit-animation: cloud3-moving 30.4s linear 0s infinite both;
                  animation: cloud3-moving 30.4s linear 0s infinite both;
        }

@-webkit-keyframes cloud3-moving {
          from { -webkit-transform: scale(0.8) translate(300px, 300px); transform: scale(0.8) translate(300px, 300px); opacity: 0; }
          10%, 50%, 90% { opacity: .9; }
          to { -webkit-transform: scale(0.8) translate(-200px, 300px); transform: scale(0.8) translate(-200px, 300px); opacity: 0; };
        }

@keyframes cloud3-moving {
          from { -webkit-transform: scale(0.8) translate(300px, 300px); transform: scale(0.8) translate(300px, 300px); opacity: 0; }
          10%, 50%, 90% { opacity: .9; }
          to { -webkit-transform: scale(0.8) translate(-200px, 300px); transform: scale(0.8) translate(-200px, 300px); opacity: 0; };
        }

#cloud4 {
          -webkit-animation: cloud4-moving 31.2s linear 0s infinite both;
                  animation: cloud4-moving 31.2s linear 0s infinite both;
        }

@-webkit-keyframes cloud4-moving {
          from { -webkit-transform: scale(0.7) translate(1100px, 400px) rotateY(180deg); transform: scale(0.7) translate(1100px, 400px) rotateY(180deg); opacity: 0; }
          10%, 50%, 90% { opacity: 1; }
          to { -webkit-transform: scale(0.7) translate(400px, 400px) rotateY(180deg); transform: scale(0.7) translate(400px, 400px) rotateY(180deg); opacity: 0; };
        }

@keyframes cloud4-moving {
          from { -webkit-transform: scale(0.7) translate(1100px, 400px) rotateY(180deg); transform: scale(0.7) translate(1100px, 400px) rotateY(180deg); opacity: 0; }
          10%, 50%, 90% { opacity: 1; }
          to { -webkit-transform: scale(0.7) translate(400px, 400px) rotateY(180deg); transform: scale(0.7) translate(400px, 400px) rotateY(180deg); opacity: 0; };
        }

#sun {
      -webkit-transform: translate(1100px, 0);
          -ms-transform: translate(1100px, 0);
              transform: translate(1100px, 0)
    }

#sun-left { fill: #FFD300; }
      #sun-right { fill: #FFEB00;; }

/*
   * Mountains
   * ----
   */

#mountains {
    width: 100%;
    height: 60%;
    position: absolute;
    bottom: 20%;
  }

/* General */
    #mountain {}
      #mountainRightSide { fill: currentColor; }
      #mountainLeftSide #mountain-snow  { opacity: 0.8; }
      #mountain-snow { fill: #fff; }

/* Specific */
    #backMountains {
      fill: rgb(97, 98, 85);
      color: #6D6F60;
      -webkit-animation: back-mountains-moving 16s linear 0s infinite both;
              animation: back-mountains-moving 16s linear 0s infinite both;
    }

@-webkit-keyframes back-mountains-moving {
      from { -webkit-transform: translate(0, 20px) scale(.9); transform: translate(0, 20px) scale(.9); }
      to { -webkit-transform: translate(-180px, 20px) scale(.9); transform: translate(-180px, 20px) scale(.9); };
    }

@keyframes back-mountains-moving {
      from { -webkit-transform: translate(0, 20px) scale(.9); transform: translate(0, 20px) scale(.9); }
      to { -webkit-transform: translate(-180px, 20px) scale(.9); transform: translate(-180px, 20px) scale(.9); };
    }

#frontMountains {
      fill: rgb(154, 159, 132);
      color: #A5A991;
      -webkit-animation: front-mountains-moving 8s linear 0s infinite both;
              animation: front-mountains-moving 8s linear 0s infinite both;
    }

@-webkit-keyframes front-mountains-moving {
      from { -webkit-transform: translateX(-200px); transform: translateX(-200px); }
      to { -webkit-transform: translateX(-400px); transform: translateX(-400px); };
    }

@keyframes front-mountains-moving {
      from { -webkit-transform: translateX(-200px); transform: translateX(-200px); }
      to { -webkit-transform: translateX(-400px); transform: translateX(-400px); };
    }

#mountain1 { -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); }
      #mountain2 { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); }
      #mountain3 { -webkit-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); }
      #mountain4 { -webkit-transform: translateX(500px); -ms-transform: translateX(500px); transform: translateX(500px); }
      #mountain5 { -webkit-transform: translateX(700px); -ms-transform: translateX(700px); transform: translateX(700px); }
      #mountain6 { -webkit-transform: translateX(900px); -ms-transform: translateX(900px); transform: translateX(900px); }
      #mountain7 { -webkit-transform: translateX(1100px); -ms-transform: translateX(1100px); transform: translateX(1100px); }
      #mountain8 { -webkit-transform: translateX(1300px); -ms-transform: translateX(1300px); transform: translateX(1300px); }
      #mountain9 { -webkit-transform: translateX(1500px); -ms-transform: translateX(1500px); transform: translateX(1500px); }
      #mountain10 { -webkit-transform: translateX(1700px); -ms-transform: translateX(1700px); transform: translateX(1700px); }
      #mountain12 { -webkit-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); }
      #mountain11 { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
      #mountain13 { -webkit-transform: translateX(400px); -ms-transform: translateX(400px); transform: translateX(400px); }
      #mountain14 { -webkit-transform: translateX(600px); -ms-transform: translateX(600px); transform: translateX(600px); }
      #mountain15 { -webkit-transform: translateX(800px); -ms-transform: translateX(800px); transform: translateX(800px); }
      #mountain16 { -webkit-transform: translateX(1000px); -ms-transform: translateX(1000px); transform: translateX(1000px); }
      #mountain17 { -webkit-transform: translateX(1200px); -ms-transform: translateX(1200px); transform: translateX(1200px); }
      #mountain18 { -webkit-transform: translateX(1400px); -ms-transform: translateX(1400px); transform: translateX(1400px); }
      #mountain19 { -webkit-transform: translateX(1600px); -ms-transform: translateX(1600px); transform: translateX(1600px); }
      #mountain20 { -webkit-transform: translateX(1800px); -ms-transform: translateX(1800px); transform: translateX(1800px); }

/*
  * Trees
  * ----
  */

#trees {
    width: 100%;
    height: 60%;
    position: absolute;
    bottom: 20%;
  }

/* General */
    #leftLeaf { fill: #00B16A; }
    #rightLeaf { fill: #3FC380; }
    #trunk { stroke: #8F6F40; stroke-width: 20px; }

/* Specific */
    #tree1 { -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); }
    #tree2 { -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
    #tree3 { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); }
    #tree4 { -webkit-transform: translateX(700px); -ms-transform: translateX(700px); transform: translateX(700px); }
    #tree5 { -webkit-transform: translateX(1100px); -ms-transform: translateX(1100px); transform: translateX(1100px); }
    #tree6 { -webkit-transform: translateX(1200px); -ms-transform: translateX(1200px); transform: translateX(1200px); }
    #tree7 { -webkit-transform: translateX(1400px); -ms-transform: translateX(1400px); transform: translateX(1400px); }

#firstTrees {
      -webkit-animation: first-trees-moving 12s linear 0s infinite both;
              animation: first-trees-moving 12s linear 0s infinite both;
    }

@-webkit-keyframes first-trees-moving {
      from { -webkit-transform: translateX(2000px); transform: translateX(2000px); }
      to { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); };
    }

@keyframes first-trees-moving {
      from { -webkit-transform: translateX(2000px); transform: translateX(2000px); }
      to { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); };
    }

#secondTrees {
      -webkit-animation: second-trees-showing 6s linear 0s 1 both, 
                 second-trees-moving 12s linear 6s infinite both;
              animation: second-trees-showing 6s linear 0s 1 both, 
                 second-trees-moving 12s linear 6s infinite both;
    }

@-webkit-keyframes second-trees-showing {
      from, 99% { opacity: 0; }
      to { opacity: 1; };
    }

@keyframes second-trees-showing {
      from, 99% { opacity: 0; }
      to { opacity: 1; };
    }

@-webkit-keyframes second-trees-moving {
      from { -webkit-transform: translateX(2000px); transform: translateX(2000px); }
      to { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); };
    }

@keyframes second-trees-moving {
      from { -webkit-transform: translateX(2000px); transform: translateX(2000px); }
      to { -webkit-transform: translateX(-1500px); transform: translateX(-1500px); };
    }

/*
   * Ground
   * ----
   */

#ground {
    width: 100%;
    height: 18%;
    position: absolute;
    bottom: 0;
    background: #9E906E;
  }

#grass {
    position: absolute;
    bottom: 18%;
    height: 2%;
    width: 100%;
    background: #2ecc71;
  }

#water {
  position: absolute;
  bottom: 0;
  height: 14%;
  width: 100%;
  background: #00D5E5;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg