css九宫格

小董大咖 · 收录于 2023-09-24 04:05:18 · source URL

首先是实现九宫格的样式，对每一行进行偏移，当鼠标放上去会使他们形成一张图片

html

<div class="img_container">
        <div class="img1"></div>
        <div class="img1"></div>
        <div class="img1"></div>
        <div class="img1"></div>
        <div class="img1"></div>
        <div class="img1"></div>
        <div class="img1"></div>
        <div class="img1"></div>
        <div class="img1"></div>
    </div>

css

.img_container{
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
      }
      .img1{
        box-shadow: inset 0 0 0 1px #fff;
        transition: 0.5s;
        background-size: 300px 300px;
        background-image: url(./assets/10013.jpg);   // 自己的图片
        position: relative;
      }
      .img1:nth-child(3n+1){
        left: -20px;
        background-position-x: 0;
      }
      .img1:nth-child(3n+2){
        left: 0;
        background-position-x: -100px;
      }
      .img1:nth-child(3n){
        left: 20px;
        background-position-x: -200px;
      }
      .img1{
        top: 20px;
        background-position-y: -200px;
      }
      .img1:nth-child(-n+6){
        top: 0;
        background-position-y: -100px;
      }
      .img1:nth-child(-n+3){
        top: -20px;
        background-position-y: 0;
      }
      .img_container:hover .img1{
        left: 0;
        top: 0;
        box-shadow: inset 0 0 0 0 #fff;
      }