当前位置：首页 > CSS

css制作房子

2026-04-01 10:59:33CSS

使用CSS绘制简单房屋

通过CSS的::before和::after伪元素结合border属性，可以创建基础的房屋结构。以下是一个纯CSS实现的房屋示例：

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

.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: 80px solid #b22222;
}

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

.door {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 70px;
  background: #8b4513;
}

.window {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: #87ceeb;
  border: 3px solid #000;
}

SVG实现房屋图形

对于更复杂的房屋设计，SVG提供更灵活的路径绘制能力：

<svg width="300" height="250" viewBox="0 0 300 250">
  <!-- 屋顶 -->
  <polygon points="150,30 280,120 20,120" fill="#d9534f"/>

  <!-- 墙体 -->
  <rect x="50" y="120" width="200" height="120" fill="#f0ad4e"/>

  <!-- 门 -->
  <rect x="130" y="170" width="40" height="70" fill="#5bc0de"/>
  <circle cx="145" cy="205" r="2" fill="#333"/>

  <!-- 窗户 -->
  <rect x="70" y="140" width="40" height="40" fill="#5cb85c" stroke="#333"/>
  <line x1="90" y1="140" x2="90" y2="180" stroke="#333"/>
  <line x1="70" y1="160" x2="110" y2="160" stroke="#333"/>
</svg>

3D房屋效果

通过CSS transform属性可以创建3D视角的房屋：

.house-3d {
  position: relative;
  width: 200px;
  height: 150px;
  transform-style: preserve-3d;
  transform: perspective(600px) rotateY(20deg);
}

.roof-3d {
  position: absolute;
  width: 200px;
  height: 100px;
  background: #c00;
  transform: rotateX(30deg) translateZ(-50px);
}

.wall-3d {
  position: absolute;
  width: 200px;
  height: 150px;
  background: #e6b800;
  transform: translateZ(50px);
}

动画效果增强

添加CSS动画使房屋更生动：

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

@keyframes glow {
  from { box-shadow: 0 0 5px #fff; }
  to { box-shadow: 0 0 20px #ff0; }
}

.door {
  transition: transform 0.5s;
}

.door:hover {
  transform: translateX(-50%) rotateY(-30deg);
}

响应式设计

使用CSS变量和媒体查询确保房屋在不同设备上显示良好：

css制作房子

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

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

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