css动画实现开门效果图

CSS动画可以实现各种炫酷的交互效果，比如开门效果。下面我们来介绍一下如何使用CSS动画实现一个开门效果。

  .door {
    width: 400px;
    height: 400px;
    position: relative;
  }
  .door-left,.door-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    transform-origin: right center;
    transition: transform 1s;
  }
  .door-left {
    left: 0;
    background-color: #334d5c;
  }
  .door-right {
    right: 0;
    background-color: #f0ca4d;
  }
  .door:hover .door-left {
    transform: rotateY(-90deg);
  }
  .door:hover .door-right {
    transform: rotateY(90deg);
  }

上述代码中，我们首先定义了一个 door 容器，并在其内部定义了左右两扇门（ door-left 和 door-right）。

接着，我们使用 transform-origin 属性设置旋转的中心点在右侧中心处，以便实现类似开门的效果。并使用 transition 属性设置旋转的过渡时间为1秒。

然后，在 hover 时分别对左右两扇门设置 transform 属性实现旋转。注意，左门旋转的角度为负值，右门旋转的角度为正值，以便实现对称的开门效果。

通过这样简单的CSS样式代码，我们就可以实现一个生动且有趣的开门效果，增加网站交互的趣味性和可玩性。