纯css布局实现一个城堡建设动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现一个城堡建设动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
    margin: 0;
    padding: 0;
}
:root {
    --green: #aeca1e;
    --orange-primary: #ef5701; 
    --orange-secondary: #fa6810;
    --wallcolor: #a79a94;
    --wallcolor-second: #c5bbb9;
    --wallcolor-third: #d4c9c5;
    --window-color: #947f74;
    --gate-left: #bc6732;
    --gate-right:#d07d34;
    --mud-color: #7c5334;
    --bridge-color: #c5b99f;
    --bridge-color-1: #827b5e;
    --background-color: #3a5c90;
  }

body {
    background: #e3edf7;
    font-family: sans-serif;
}


.container {
    background-color: var(--background-color);
    width: 700px;
    height: 700px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

.catsle {
    position: absolute;
    left: 0%;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.base-line {
    width: 100%;
    height: 9px;
    background-color: var( --green);
    bottom: 10px;
    position: absolute;
    left: 0%;
    bottom: 0%;
    z-index: 99;
}

.bottom {
    position: absolute;
    left: 10%;
    display: flex;
    bottom: 150px;
    z-index: 3; 
}





.bottom .wall {
    position: absolute;
    bottom: 0;
}
.bottom .wall.one {
    width: 70px;
    background-color: var(--wallcolor);
    height: 100px;
    left: 0;
    bottom: -400px;
    animation: bottom-animation 1s forwards;
    animation-delay: 1s;
}
.bottom .wall.two {
    width:70px;
    background-color: var(--wallcolor-second);
    height: 200px;
    left: 70px;
    bottom: -400px;
    animation: bottom-animation 2s forwards;
    animation-delay: 1.5s;

}
.two-duplicate {
    left: 324px !important;
}
.bottom .wall.three{
    width:130px;
    background-color: var(--wallcolor-third);
    height: 110px;
    left: 140px;
    bottom: -400px;
    animation: bottom-animation 3.5s forwards;
    animation-delay: 2s;

}
.bottom .wall.four {
    width:70px;
    background-color: var(--wallcolor-second);
    height: 200px;
    left: 270px;
    bottom: -400px;
    animation: bottom-animation 2s forwards;
    animation-delay: 3s;


}
.bottom .wall.five {
    width: 70px;
    background-color: var(--wallcolor);
    left: 340px;
    height: 100px;
    bottom: -400px;
    animation: bottom-animation 2s forwards;
    animation-delay: 3.5s;

}

.bottom .wall.one .after-wall {
    display: flex;
    top: -10px;
    position: absolute;
    justify-items: space-between;
}
.bottom .wall.one .after-wall div, .bottom .wall.two .after-wall div, .bottom .wall.four .after-wall div,.bottom .wall.five .after-wall div {
    height: 10px;
    width: 10px;
    background-color: var(--wallcolor);
    margin-right: 10px;
}   
.bottom .wall.three .after-wall {
    display: flex;
    top: -10px;
    position: absolute;
    justify-items: space-between;
}
.bottom .wall.two .after-wall div, .bottom .wall.four .after-wall div {
    background-color: var(--wallcolor-second);
}

.bottom .wall.three .after-wall div {
    height: 10px;
    width: 10px;
    background-color: var(--wallcolor);
    margin-right: 10px;
    background-color: var(--wallcolor-third);
}

.bottom .wall.one .after-wall,  .bottom .wall.two .after-wall, .bottom .wall.four .after-wall, .bottom .wall.five .after-wall{
    display: flex;
    top: -10px;
    position: absolute;
    justify-items: space-between;
}

.window {
    background-color: var(--window-color);
    height: 20px;
    width: 12px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}
.wall.one .window, .wall.five .window {
    position: absolute;
    top: 38%;
    left: 38%;
}

.wall.two .windows, .wall.four .windows {
    position: absolute;
    top: 15%;
    left: 35%;
}

.wall.two .windows .window, .wall.four .windows .window {
    margin-bottom: 70px;
}

/***/

.wall.two .separator, .wall.four .separator {
    background: #d4c9c5;
    width: 70px;
    height: 12px;
    z-index: 5;
    position: absolute;
    top: 45%;
}

.wall.three .windows {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    display: flex;
    justify-content: space-between;
}

.wall.three .gate {
    position: absolute;
    top: 40%;
    left: 25%;
    width: 50%;
    height: 60%;;
    background: linear-gradient(90deg, var(--gate-left) 0%, var(--gate-left) 50%, var(--gate-right) 50%, var(--gate-right) 100%);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    box-shadow:  inset 5px 5px 5px #a65a18,
                    inset 5px -5px 5px #a65a18,
                    inset -5px 5px 5px #a65a18,
                    inset -5px -5px 5px #a65a18;
}

.middle-layer {
    position: absolute;
    left: 24%;
    display: flex;
    bottom: 150px;
    z-index: 2;
}
.middle-layer .wall {
    position: absolute;
    bottom: 0;
}

.middle-layer .wall.one {
    width: 70px;
    background-color: var(--wallcolor);
    height: 300px;
    bottom: -700px;
    left: 0;
    animation: middle-animation 2.5s forwards;
    animation-delay: 5s;
}
.middle-layer .wall.two {
    width: 100px;
    background-color: var(--wallcolor-second);
    height: 400px;
    left: 70px;
    bottom: -700px;
    animation: middle-animation 2s forwards;
    animation-delay: 5.5s;
}
.middle-layer .wall.three{
    width: 70px;
    background-color: var(--wallcolor);
    height: 300px;
    left: 170px;
    bottom: -700px;
    animation: middle-animation 3s forwards;
    animation-delay: 6s;
}



.middle-layer .wall.one .top, .middle-layer .wall.three .top {
   position: absolute;
   top: -50px;
   left: 0;
}

.middle-layer .wall.one .top .top-most, .middle-layer .wall.three .top .top-most {
    height: 50px;
    width: 70px;
    background: linear-gradient(90deg,  var(--orange-primary) 0%,  var(--orange-primary) 50%,  var(--orange-secondary) 51%,  var(--orange-secondary) 100%);
    clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    position: absolute;
    z-index: 2;

}

.middle-layer .wall.two .top {
    position: absolute;
    top: -70px;
    left: 0;
    z-index: 3;
 }
 
 .middle-layer .wall.two .top .top-most {
     position: absolute;
     height: 70px;
     width: 100px;
     background: linear-gradient(90deg,  var(--orange-primary) 0%,  var(--orange-primary) 50%,  var(--orange-secondary) 51%,  var(--orange-secondary) 100%);
     clip-path: polygon(50% 0, 100% 100%, 0% 100%);
     z-index: 3;
    position: absolute;

 }

 .flag {
     background-color: #b1958a;
     height: 50px;
     width: 3px;
     border-radius: 7px;
     position: absolute;
     top: -40px;
     left: 34px;
     z-index: 1;
     animation: animate-flag 2s infinite;
 }

 .flag::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: orangered;
    top: 3px;
    right: 2px;
    clip-path: polygon(0% 50%, 100% 0, 100% 100%);
    animation: animate-flag 6s infinite;
}


.middle-layer .wall.two .top .f.........完整代码请登录后点击上方下载按钮下载查看