当前位置：首页 > CSS

css制作门窗

2026-02-13 04:09:11CSS

CSS 制作门窗效果

使用CSS可以创建逼真的门窗效果，结合阴影、边框和过渡效果增强视觉体验。

门窗框架

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

添加门窗细节

.door::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 10px;
  height: 10px;
  background-color: #5D4037;
  border-radius: 50%;
  transform: translateY(-50%);
}

窗户效果

.window {
  width: 80px;
  height: 80px;
  background-color: #E1F5FE;
  border: 3px solid #B3E5FC;
  position: relative;
}

.window::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #B3E5FC;
  top: 50%;
}

.window::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #B3E5FC;
  left: 50%;
}

悬停动画效果

.door:hover {
  transform: rotateY(30deg);
  transition: transform 0.5s ease;
  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
}

3D透视效果

css制作门窗

.house {
  perspective: 1000px;
}

.door-3d {
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 1s;
}

.door-3d:hover {
  transform: rotateY(-90deg);
}