当前位置：首页 > CSS

css制作门窗

2026-04-01 12:43:38CSS

CSS 制作门窗效果

使用 CSS 可以创建各种门窗的视觉效果，包括简单的矩形门窗、带有玻璃效果的窗户以及动画效果的门。以下是几种常见的实现方法。

基础门窗样式

创建一个简单的矩形门窗，可以使用 border 和 background-color 属性：

.door {
  width: 100px;
  height: 200px;
  background-color: #8B4513; /* 棕色木门 */
  border: 5px solid #5D4037; /* 边框加深 */
}

.window {
  width: 120px;
  height: 120px;
  background-color: #87CEEB; /* 浅蓝色玻璃 */
  border: 3px solid #333;
}

玻璃效果窗户

通过 box-shadow 和 linear-gradient 模拟玻璃的透明和反光效果：

.glass-window {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, rgba(135, 206, 235, 0.7), rgba(255, 255, 255, 0.9));
  border: 2px solid #666;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
}

动画门效果

使用 CSS 动画实现门的开关效果：

.animated-door {
  width: 100px;
  height: 200px;
  background-color: #A0522D;
  transform-origin: left center;
  transition: transform 1s ease;
}

.animated-door:hover {
  transform: rotateY(-60deg);
}

复杂门窗结构

通过伪元素添加门窗的细节，如窗框或门把手：

.detailed-window {
  width: 150px;
  height: 150px;
  background-color: #E0F7FA;
  position: relative;
  border: 3px solid #333;
}

.detailed-window::before,
.detailed-window::after {
  content: '';
  position: absolute;
  background-color: #333;
}

.detailed-window::before {
  width: 100%;
  height: 3px;
  top: 50%;
  left: 0;
}

.detailed-window::after {
  width: 3px;
  height: 100%;
  left: 50%;
  top: 0;
}

响应式门窗设计

使用媒体查询确保门窗在不同屏幕尺寸下显示正常：

css制作门窗

.responsive-window {
  width: 20vw;
  height: 20vw;
  max-width: 200px;
  max-height: 200px;
  background-color: #B3E5FC;
  border: 2px solid #333;
}

@media (max-width: 600px) {
  .responsive-window {
    width: 30vw;
    height: 30vw;
  }
}

通过以上方法，可以灵活地创建各种门窗效果，并根据需要调整样式和动画。