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

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

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