当前位置：首页 > CSS

css制作房子

2026-01-28 08:04:11CSS

使用CSS绘制简单房子

通过纯CSS可以绘制一个基础的房子图形，结合HTML的div元素和CSS的样式属性实现。以下是具体实现方法：

HTML结构

<div class="house">
  <div class="roof"></div>
  <div class="wall"></div>
  <div class="door"></div>
  <div class="window"></div>
</div>

CSS样式

.house {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.roof {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #8B4513;
}

.wall {
  width: 160px;
  height: 120px;
  background: #CD853F;
  margin: 0 auto;
}

.door {
  position: absolute;
  width: 40px;
  height: 70px;
  background: #5C3317;
  bottom: 0;
  left: 80px;
}

.window {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #87CEEB;
  top: 80px;
  left: 30px;
  border: 3px solid #000;
}

添加更多细节

通过伪元素和阴影效果可以增加房子的细节，比如烟囱和窗户格栅：

css制作房子

烟囱CSS

.roof::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 50px;
  background: #A0522D;
  top: -60px;
  left: 30px;
}

窗户格栅CSS

.window::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #000;
  top: 50%;
}
.window::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 100%;
  background: #000;
  left: 50%;
}

动画效果

通过CSS动画可以让房子产生交互效果，比如灯光闪烁：

css制作房子

灯光动画CSS

@keyframes light {
  0% { background: #FFD700; }
  50% { background: #FFFF00; box-shadow: 0 0 10px #FFD700; }
  100% { background: #FFD700; }
}

.window {
  animation: light 2s infinite alternate;
}

响应式调整

使用CSS变量和媒体查询可以让房子适应不同屏幕尺寸：

响应式CSS

:root {
  --house-size: 200px;
}

@media (max-width: 600px) {
  :root {
    --house-size: 150px;
  }
}

.house {
  width: var(--house-size);
  height: var(--house-size);
}

通过组合这些CSS技术，可以创建出具有基本结构和细节的房屋图形。调整颜色、尺寸和位置参数可以进一步定制外观。