css开关门一个不动

CSS开关门是网页设计中经常用到的特效，让网页看起来更加生动，给用户良好的交互体验。

.door {
      position: relative;
}
.door:before, .door:after {
      content: ';
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background: #ccc;
      transform-origin: left center;
      transition: transform 0.5s ease-in-out;
}
.door:before {
      z-index: 10;
      transform: rotateY(0deg);
}
.door:after {
      transform: rotateY(180deg);
}
.door.open:before {
      transform: rotateY(-90deg);
}
.door.open:after {
      transform: rotateY(90deg);
}
    

上述CSS代码实现了一个开关门的效果，使用了:before和:after伪元素，通过transform的rotateY属性实现了门的翻转效果。同时通过添加transition属性实现了平滑的过渡效果。

HTML结构如下所示：

div class="door">
    /div>
    

给door元素添加类名open时，就可以触发门的打开动画，类名的控制可以通过JavaScript实现。

总之，这种CSS开关门特效不仅可以通过简单的CSS和HTML代码实现，而且效果出色，非常适合用于网页设计中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！