css百叶窗

原理：

        将图片分割为多段，或者说创建n个div，每个div的背景是原始图片的1/n

        css设置：father:hover childer{}

省流：

<div class="img1">
  <div class="img2" style="--img:0"></div>  
  <div class="img2" style="--img:1"></div>  
  <div class="img2" style="--img:2"></div>  
  <div class="img2" style="--img:3"></div>  
  <div class="img2" style="--img:4"></div>  
  <div class="img2" style="--img:5"></div>  
  <div class="img2" style="--img:6"></div>  
  <div class="img2" style="--img:7"></div>  
  <div class="img2" style="--img:8"></div>  
  <div class="img2" style="--img:9"></div>  
</div>
.img1{
    width: 900px;
    height: 500px;
    background: url("图片地址") no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    
}
.img2{
    background: url("图片地址") no-repeat;
    background-size: cover;
    background-position-x: calc(var(--img)*10%);  //10是100/img2的个数
    flex: 1;
    transform: rotateY(90deg);
    transition: 0.8s;
}
.img1:hover .img2{  //语句意思是当鼠标移入img1时，img2翻转
    transform: rotateY(0);
}