css制作开门动画

CSS 制作开门动画

使用 CSS 的 transform 和 transition 属性可以轻松实现开门动画效果。以下是两种常见的实现方式：

水平开门效果

通过旋转元素模拟门的开启动作：

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

.door-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
  margin: 50px auto;
}

.door {
  width: 100%;
  height: 100%;
  background-color: #8B4513;
  transform-origin: left center;
  transition: transform 1s ease-in-out;
}

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

垂直开门效果

类似百叶窗的上下开启效果：

.door {
  width: 100%;
  height: 100%;
  background-color: #8B4513;
  transform-origin: top center;
  transition: transform 1s ease-in-out;
}

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

双开门效果

创建对称的两个门扇：

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

.double-door {
  display: flex;
  width: 400px;
  height: 300px;
  margin: 50px auto;
  perspective: 1000px;
}

.left-door, .right-door {
  width: 50%;
  height: 100%;
  background-color: #A0522D;
  transition: transform 1s;
}

.left-door {
  transform-origin: left center;
}

.right-door {
  transform-origin: right center;
}

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

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

添加3D深度效果

增强立体感：

.door {
  /* 其他样式 */
  box-shadow: 5px 0 15px rgba(0,0,0,0.3);
  border-right: 2px solid #5D2906;
}

控制动画触发方式

可以使用 JavaScript 控制而非 hover：

document.querySelector('.door').addEventListener('click', function() {
  this.classList.toggle('open');
});

.door.open {
  transform: rotateY(-90deg);
}

这些方法可以组合使用，通过调整过渡时间、旋转角度和变换原点，能创造出各种不同的开门动画效果。