CSS 之 图片九宫格变幻效果

一、简介

​ 本篇博客用于讲解如何实现图片九宫格变幻的样式效果，将图片分为九块填充在3×3的的九宫格子元素中，并结合grid、hover、transition等CSS属性，实现元素hover时，九宫格子元素合并为一张完整图片的动画效果。

​ 为了简化代码，demo中通过JS设置CSS变量的方法，优化了元素背景的设置过程，减少了代码的繁杂度。

​ 最后还结合js的点击事件实现了一个简易的点击拼图demo。

效果示意图：

二、具体实现

1、九宫格子元素显示部分图片，然后从外向内组合变幻成完整图片

页面效果：

实现思路：

​ ① 首先在一个父元素内，创建九个子元素，并通过display: grid;实现3×3的九宫格布局，使其聚集在父元素中间，此时子元素之间无间隙。

​ ② 给这九个子元素通过background的相关属性，分别设置各个子元素的背景图片为总图片的一部分(1/9)，其聚集在一起时，正好能够组成一张完成的图片。

​ ③ 在设置子元素背景时，可以通过依次设置九个子元素的背景样式来实现，但是代码过于繁琐。为了优化代码，可以通过js获取相应元素，然后遍历获取到的元素设置CSS变量，最后再统一通过子级选择器+CSS变量的形式，统一设置元素背景。

​ ④ 设置好背景后，利用父元素grid布局的gap属性，统一设置子元素之间的间距，使九个子元素按照固定间距，形成九宫格布局。

​ ⑤ 父元素hover时，修改gap属性的值，使子元素再次聚集在一起，并通过transition实现缓动动画。

核心思路为：变化主体为父元素，子元素不改变，改变父元素控制间隙的属性。

具体代码：

<style>
		.d1 {
     
     
      /* 设置grid布局 */
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      /* 设置子元素间隔 */
      gap: 20px;
      width: 340px;
      height: 340px;
      /* 设置子元素居中在父元素中心 */
      justify-content: center;
      align-content: center;
      cursor: pointer;
      /* 设置缓动动画 */
      transition: all 0.3s linear;
      border: 2px solid red;
    }
    /* hover时消除子元素间隔 */
    .d1:hover {
     
     
      gap: 0;
    }
    /* 统一设置子元素的背景 */
    .d1>div {
     
     
      background: url(../image/test.jpg) no-repeat;
      /* 设置背景图片大小 这个大小等于后面拼接成的完成图片的大小 */
      background-size: 300px 300px;
      /* 利用JS设置的CSS变量控制子元素的背景 */
      background-position: var(--bgx, 0) var(--bgy, 0);
    }
</style>

<div class="d1">
    <div class="d1-1"></div>
    <div class="d1-2"></div>
    <div class="d1-3"></div>
    <div class="d1-4"></div>
    <div class="d1-5"></div>
    <div class="d1-6"></div>
    <div class="d1-7"></div>
    <div class="d1-8"></div>
    <div class="d1-9"></div>
</div>

<script>
  	// 获取所有子元素
    const d1List = document.querySelectorAll('.d1 > div');
    // 遍历所有子元素
    d1List.forEach((item, index) => {
     
     
      // 计算当前子元素所在行 0~2
      const row = Math.floor(index / 3);
      // 计算当前子元素所在列 0~2
      const col = index % 3;
      console.log(row, col);
      // 根据子元素所在行和列 设置CSS变量 决定显示的背景图片的偏移量 从而决定背景图片的内容
      item.style.setProperty('--bgx', `${