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

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

代码语言：html

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

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  display: grid;
  place-content: center;
  height: 100vh;
  background: radial-gradient(#907da3, #655079);
}

.container {
  width: 90vmin;
  height: 100vmin;
  position: relative;
}

.roof {
  display: grid;
  justify-content: center;
}
.roof1 {
  border-bottom: 12vmin solid #2e1f3d;
  border-left: 5vmin solid transparent;
  border-right: 5vmin solid transparent;
  height: 0;
  width: 40vmin;
  margin: 0 auto;
}
.roof2 {
  width: 55vmin;
  height: 5vmin;
  background: linear-gradient(#5d4d6d, #48305f);
}

.body {
  width: 50vmin;
  height: 64vmin;
  background: radial-gradient(#ffad91 20%, #d16e61);
  margin: 0 auto;
}
.body::before {
  content: "";
  position: absolute;
  top: 20vmin;
  width: 50vmin;
  height: 0.5vmin;
  background: #45325880;
  box-shadow: 0 1.5vmin #45325880;
}

.window {
  width: 14vmin;
  height: 21vmin;
  border: 2px solid #655079;
  position: relative;
  background: linear-gradient(90deg, #77628b 1vmin, #ffa281 1vmin, #ffa281 6vmin, #77628b 6vmin, #77628b 7vmin, #ffa281 7vmin, #ffa281 12.5vmin, #77628b 11vmin, #77628b 12vmin);
  background-size: 534px 534px;
}
.window::before, .window::after {
  content: "";
  width: 16.2vmin;
  height: 2vmin;
  position: absolute;
  left: -1.2vmin;
  background: #453258;
}
.window::before {
  top: -2vmin;
}
.window::after {
  bottom: -2vmin;
}
.window__cont {
  position: absolute;
  top: 30vmin;
  left: 25vmin;
}
.window__cont2 {
  position: absolute;
  top: 30vmin;
  left: 50vmin;
}

.door {
  width: 12vmin;
  height: 21vmin;
  background: linear-gradient(#846e99, #655079);
  border-radius: 40% 40% 0 0;
  border: 0.5vmin solid #2e1f3d;
}
.door__win {
  width: 8vmin;
  height: 8vmin;
  background: #ff9a77;
  border-radius: 40% 40% 0 0 / 50% 50% 0 0;
  border: 0.7vmin solid #2e1f3d;
  margin: 2vmin auto 0;
}
.door__han {
  width: 2vmin;
  height: 2vmin;
  border-radius: 50%;
  background: #ff9a77;
  margin: 1vmin 1vmin 0 auto;
}
.door__cont {
  position: absolute;
  bottom: 19vmin;
  left: 27vmin;
}

.tre.........完整代码请登录后点击上方下载按钮下载查看