css制作门窗

CSS 制作门窗效果

通过CSS可以实现简单的门窗视觉效果，通常结合边框、阴影、过渡效果和伪元素来模拟门窗的开关状态。以下是几种常见方法：

基础门窗样式

使用border和background模拟门窗框架和玻璃：

.door {
  width: 100px;
  height: 200px;
  background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
  border: 5px solid #5D4037;
  position: relative;
  transition: transform 0.5s ease;
}

添加门窗把手

通过伪元素创建门把手：

.door::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 8px;
  height: 20px;
  background: #333;
  border-radius: 4px;
}

门窗开关动画

使用transform实现旋转开门效果：

.door:hover {
  transform-origin: left center;
  transform: rotateY(-60deg);
}

窗户玻璃效果

使用半透明背景和边框模拟玻璃：

.window {
  width: 120px;
  height: 120px;
  background: rgba(200, 220, 255, 0.3);
  border: 3px solid #78909C;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

3D 门窗效果

结合CSS 3D变换增强立体感：

.door-3d {
  transform-style: preserve-3d;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

响应式门窗

通过媒体查询调整门窗尺寸：

@media (max-width: 600px) {
  .door {
    width: 80px;
    height: 160px;
  }
}

这些CSS技巧可以组合使用，配合HTML结构创建更复杂的门窗效果。实际应用中可能需要根据具体设计调整颜色、尺寸和动画参数。