CSS实现开门效果

.door{
              position: relative;
              width: 450px;
              height: 300px;
              border: 1px solid #000;
              margin: 100px auto;
              background: url(img/4.jpeg)no-repeat;
              perspective: 1000px;
              }
              .door-left,.door-right{
                  position: absolute;
                  top: 0;
                  width: 50%;
                  height: 100%;
                  background-color: #00aaff;
                  background-size: 100% 100%;
                  transition: all 1s;
              }
              .door-left{
                  left: 0;
                  border-right: 1px solid #000;
                  transform-origin: left;
              }
              .door-right{
                  right: 0;
                  border-right: 1px solid #000;
                  transform-origin: right;
              }
              .door-left::before{
                  content:'';
                  position: absolute;
                  right: 0;
                  top: 50%;
                  width: 20px;
                  height: 20px;
                  border: 1px solid #000;
                  border-radius: 50%;
                  transform: translateY(-50%);
              }
              .door-right::before{
                  content:'';
                  position: absolute;
                  left: 0;
                  top: 50%;
                  width: 20px;
                  height: 20px;
                  border: 1px solid #000;
                  border-radius: 50%;
                  transform: translateY(-50%);
              }
              .door:hover .door-left{
                  transform: rotateY(-130deg);
              }
              .door:hover    .door-right{

                  transform: rotateY(130deg);
              }

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

本文参考自:https://juejin.cn/post/6844903858154504199