div+css布局实现野外露营烤火昼夜循环效果代码-html代码-BFW代码库

div+css布局实现野外露营烤火昼夜循环效果代码

代码语言：html

代码描述：div+css布局实现野外露营烤火昼夜循环效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body
    {
      background-color:#1F4769;
       animation: bg 30s infinite linear;
    }
    
    .land
    {
      position:absolute;
      top:60%;
      left:30%;
      width:500px;
      height:10px;
      background:#000;
       border-radius:10%;
    }
    .chimney
    {
      position:absolute;
        left:15%;
      width:40px;
      height:10px;
      background:#ff8c1a;
       border-radius:10%;
    }
    .fire1
    {
      position:absolute;
    bottom:0%;
      left:15%;
      width:8px;
      height:24px;
      background:#ff8c1a;
      border-radius:5px;
    }
    .fire2
    {
      position:absolute;
      bottom:55%;
      left:18.2%;
      width:8px;
      height:30px;
      background:#ff8c1a;
      border-radius:5px;
    }
    .fire3
    {
        position:absolute;
        bottom:54%;
        left:21.5%;
        width:8px;
        height:34px;
        background:#ff8c1a;
        border-radius:5px;
    }
    .stick1
    {
          position:absolute;
        bottom:44%;
        left:6%;
        width:7px;
        height:90px;
        background:#001;
        border-radius:5px;
    }
    .stick2
    {
      z-index:10;
          position:absolute;
        bottom:44%;
        left:30%;
        width:7px;
        height:90px;
        background:#001;
        border-radius:5px;
    }
    .stick3
    {
      z-index:10;
          position:absolute;
        bottom:800%;
        left:4%;
        width:150px;
        height:6px;
        background:#001;
        border-radius:5px;
    }
    .vessel
    {
      z-index:10;
          position:absolute;
        bottom:460%;
        left:15%;
        width:34px;
        height:34px;
      border-radius:5%;  
      border:solid #001;
    }
    .fluid
    {
      position:absolute;
     top:50%;
      width:35px;
        height:18px;
     background:#ff3300;
      border-radius:10%;
      
    }
    .water
    {
        position:absolute;
      top:60%;
      left:70%;
      width:4%;
      height:10px;
      background:#009FC6;
        border-radius:15%
    }
    .camp
    {
      z-index:10;
      position:absolute;
      bottom:40%;
      left:50%;
    width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #EBD090;
        border-radius:5%
    }
    .camp3
    {
      z-index:10;
      position:absolute;
      bottom:40%;
      left:60%;
    width: 0;
        height: 0;
        
        border-right: 18px solid transparent;
        border-bottom: 101px solid #000;
      
    }
    .camp2
    {
      z-index:20;
       position:absolute;
      bottom:40%;
      left:65%;
      width: 100px;
        height: 100px;
        -webkit-transform: skew(27deg);
           -moz-transform: skew(27deg);
             -o-transform: skew(27deg);
        background: #D84315;
      border-radius:5%
    }
    .camp1
    {
      z-index:25;
       position:absolute;
      bottom:40%;
      left:67.7%;
      width: 100px;
        height: 50px;
        -webkit-transform: skew(27deg);
           -moz-transform: skew(27deg);
             -o-transform: skew(27deg);
        background: #E38D32;
        border-radius:5%
    }
    .camp4
    {
       z-index:25;
       position:absolute;
      bottom:100%;
      left:67.5%;
      width: 80px;
        height: 80px;
        -webkit-transform: skew(27deg);
           -moz-transform: skew(27deg);
             -o-transform: skew(27deg);
        background: #663d00;
        border-radius:10%;
          opacity:0.6;
    }
    .mountain1
    {
      z-index:5;
      position:absolute;
      bottom:90.5%;
      left:30%;
    width: 0;
        height: 0;
        border-left: 80px solid transparent;
        border-bottom: 200px solid #333;
        
    }
    .mountain2
    {
       z-index:5;
      position:absolute;
      bottom:90.5%;
      left:46%;
    width: 0;
        height: 0;
        border-right: 80px solid transparent;
        border-bottom: 200px solid #222;
      
    .........完整代码请登录后点击上方下载按钮下载查看