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

css布局实现房子效果代码

代码语言：html

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

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
    height: 97vh;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    position: relative;
    background-color: rgba(0, 0, 0, 0.938);
}

#house div,
#house div::after,
#house div::before {
    position: absolute;
}

.part {
    /* border-width: 1px !important; */
    background-color: #3f0feb34;
}

.bot-roof,
.top-roof,
.mid-roof {
    height: 50%;
    width: 100%;
    background: linear-gradient(rgb(44, 39, 49), rgb(24, 20, 26));
    /* border: solid 2px rgba(128, 128, 128, 0.486); */
    transform-origin: top;
    transform: perspective(700px) rotateX(40deg);
}

.bot {
    height: 42vh;
    width: 67vw;
    top: 46vh;
    left: 15vw;
    /* background-color: #b80101; */
    background: linear-gradient(to bottom, #a00303 40%, #fd3636);
}

.bot-roof {
    height: 20%;
    transform: perspective(700px) rotateX(25deg);
    z-index: 0;
}

.bot-roof::after {
    content: "";
    width: 66.5vw;
    height: 2vh;
    background-color: #dbdbdb;
    transform: perspective(700px) rotateX(-20deg);
    bottom: -1.9vh;
    left: 0.3vw;
    z-index: -3;
    border-radius: 0px 0px 3px 3px;
}

.bot-mid {
    height: 52vh;
    width: 22vw;
    /* background-color: rgba(0, 0, 0, 0.192); */
    bottom: 0;
    left: 22vw;
    z-index: 2;
}

.brick {
    height: 1.7vh;
    width: 2.1vw;
    border-radius: 1px;
    z-index: 100;
}

.brick:nth-of-type(odd) {
    background-color: #d41616;
}

.brick:nth-of-type(even) {
    background-color: #f13e3e;
}

.bot-mid .brick:nth-of-type(1) {
    top: 27vh;
    left: 2vw;
}

.bot-mid .brick:nth-of-type(2) {
    top: 29.4vh;
    left: 3.5vw;
}

.bot-mid .brick:nth-of-type(3) {
    top: 27vh;
    left: 5vw;
}

.bot-mid .brick:nth-of-type(4) {
    top: 27vh;
    left: 15vw;
}

.bot-mid .brick:nth-of-type(5) {
    top: 25vh;
    left: 15.5vw;
}

.bot-mid .brick:nth-of-type(6) {
    top: 28.8vh;
    left: 17vw;
}

.bot-mid .brick:nth-of-type(7) {
    top: 20vh;
    left: 5vw;
}

.bot-mid .brick:nth-of-type(8) {
    top: 36vh;
    left: 6vw;
}

.bot-mid .brick:nth-of-type(9) {
    top: 36.2vh;
    left: 14vw;
}

.bot-mid .brick:nth-of-type(10) {
    top: 16vh;
    left: 2vw;
}

.bot-mid .brick:nth-of-type(11) {
    top: 13vh;
    left: 13vw;
}

.bot-mid-bot {
    width: 23vw;
    height: 13vh;
    background-color: #fffdd0;
    /* background-color: #fffdd04f; */
    top: 40vh;
    left: -.5vw;
}

.bot-mid-mid {
    width: 22vw;
    height: calc(52vh - 13vh - 12vh);
    background-color: #fffdd0;
    /* background-color: #fffdd04f; */
    top: 13vh;
    left: 0vw;
    clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
    /* z-index: 1; */
}

.bot-mid-mid-inner {
    width: 21vw.........完整代码请登录后点击上方下载按钮下载查看