css布局实现一个房子效果代码-html代码-BFW代码库

css布局实现一个房子效果代码

代码语言：html

代码描述：css布局实现一个房子效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  margin:0;
}
#scene{
  height:90vh;
  width:130vh;
  background:#96D0F1;
  position:relative;
}
#road{
  width:100%;
  height:30%;
  background:#787D85;
  position:absolute;
  top:70%;
}

#house{
  position:absolute;
  width:60%;
  height:40%;
  background:#9F8A75;
  left:20%;
  top:30%;
}

#house::before{
  position:absolute;
  content:'';
  background:#827161;
  height:30%;
  width:96%;
  right:2%;
  bottom:100%;
}

#house::after{
  position:absolute;
  content:'';
  background:#625649;
  height:100%;
  width:60%;
}
#windows{
  position:absolute;
  height:92%;
  width:28%;
  background:#B1E4E7;
  top:8%;
  left:3%;
  z-index:2;
  box-shadow: inset 0px 0px 0px 3px rgba(0, 0, 0, 0.25);
}
#windows::before{
  position:absolute;
  content:'';
  height:40%;
  width:80%;
  background:#B1E4E7;
  top:0%;
  left:110%;
  z-index:2;
  box-shadow: inset 0px 0px 0px 3px rgba(0, 0, 0, 0.25);
}
#windows::after{
  position:absolute;
  content:'';
  height:55%;
  width:80%;
  background:#B1E4E7;
  top:45%;
  left:110%;
  z-index:2;
  box-shadow: inset 0px 0px 0px 3px rgba(0, 0, 0, 0.25);
}
#roof{
  position:absolute;
  width:105%;
  height:4%;
  left:-2.5%;
  background:#5E5247;
  border-radius:100px;
  top:-1%;
  z-index:3;
}
#roof::before{
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  background:#5E5247;
  border-radius:100px;
  top:-140%;
  z-index:3;
}
#roof::after{
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  background:#5E5247;
  border-radius:100px;
  top:-800%;
  z-index:3;
}
#banner{
  position:absolute;
  width:70%;
  height:30%;
  background:#E1725D;
  bottom:130%;
  left:15%;
}

#banner::before{
  position:absolute;
  content:'';
  width:102%;
  height:12%;
  background:#C76552;
  border-radius:100px;
  top:-10%;
  left:-1%;
  z-index:3;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}
#banner::after{
  position:absolute;
  content:'';
  width:136%;
  height:8%;
  background:#6F6357;
  bottom:-12%;
  left:-18%;
  z-index:1;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}

#brick__wall{
  position:absolute;
  height:100%;
  width:30%;
  background:#DABCA6;
  display:flex;
  flex-direction:column;
  justify-content:center;
  top:0%;
  right:10%;
  z-index:2;
  overflow:hidden;
}
#brick__group{
  width:100%;
  display:flex;
.........完整代码请登录后点击上方下载按钮下载查看