css制作开门动画

使用 CSS 制作开门动画

开门动画可以通过 CSS 的 transform 和 transition 属性实现。以下是一个完整的实现方案：

创建 HTML 结构

<div class="door-container">
  <div class="door left-door"></div>
  <div class="door right-door"></div>
</div>

添加 CSS 样式

.door-container {
  position: relative;
  width: 300px;
  height: 400px;
  perspective: 1000px;
  margin: 0 auto;
}

.door {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #8B4513;
  transition: transform 1s ease;
  transform-origin: 0% 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.left-door {
  left: 0;
  border-right: 1px solid #000;
}

.right-door {
  right: 0;
  transform-origin: 100% 50%;
}

.door-container:hover .left-door {
  transform: rotateY(-90deg);
}

.door-container:hover .right-door {
  transform: rotateY(90deg);
}

添加 3D 效果增强

要增强 3D 效果，可以修改 CSS：

.door-container {
  transform-style: preserve-3d;
}

.door {
  backface-visibility: visible;
}

添加门把手细节

在 HTML 中添加门把手：

<div class="door left-door">
  <div class="handle"></div>
</div>
<div class="door right-door">
  <div class="handle"></div>
</div>

对应的 CSS：

.handle {
  position: absolute;
  width: 10px;
  height: 20px;
  background: #FFD700;
  border-radius: 5px;
}

.left-door .handle {
  right: 10px;
  top: 50%;
}

.right-door .handle {
  left: 10px;
  top: 50%;
}

使用关键帧动画实现自动开关

要实现自动开关效果，可以使用 CSS 动画：

@keyframes doorOpen {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(-90deg); }
  100% { transform: rotateY(0); }
}

@keyframes doorOpenRight {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

.door-container .left-door {
  animation: doorOpen 5s infinite;
}

.door-container .right-door {
  animation: doorOpenRight 5s infinite;
}

响应式调整

为确保在不同屏幕尺寸下的显示效果：

@media (max-width: 600px) {
  .door-container {
    width: 200px;
    height: 300px;
  }
}