如何用CSS实现《朋友圈九宫格切图》效果？

我们经常在朋友圈能看到这样一张图

它其实是先将一张图切成九张，再以九宫格的布局组成完整的一张图显示。这个效果还是很有意思的，我们可以使用美图秀秀制作这样的图片。

那这样的效果，前端可以实现吗？怎么实现呢？

实现效果

怎么实现

首先我们要先进行九宫格的布局，这个布局也很简单，方法也很多，这里我们使用grid属性来实现。不了解grid布局的可以先去熟悉下哦~

我们先来编写DOM结构

<div class="box">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
</div>

接下来看看怎么实现九宫格的布局吧

:root {
    --w: 120px; /*每个格子的宽度*/
    --gap: 10px; /*gap间距*/
}

.box {
    width: calc(var(--w) * 3 + var(--gap) * 2);
    height: calc(var(--w) * 3 + var(--gap) * 2);
    display: grid;
    grid-template-columns: repeat(3, var(--w));
    grid-template-rows: repeat(3, var(--w));
    place-content: center;
    gap: var(--gap);

    border: 1px solid green;
}

.grid {
    width: var(--w);
    height: var(--w);
    border: 1px solid green;
}

看下效果

接下来怎么实现一张图片的九宫格切割感呢？

这里就要用到我们的background-position属性了。

思路：

第一步、每个格子都设置一个相同的背景图，设置background-size为calc(var(--w) * 3)，给边框设置一个渐变色

.grid {
    width: var(--w);
    height: var(--w);
    border: 1px solid;
    border-image: linear-gradient(45deg, #6683db, #aabbfb) 1;

    background: url(https://picsum.photos/id/106/300/300) no-repeat;
    background-size: calc(var(--w) * 3) calc(var(--w) * 3);
}

第二步、给每个格子设置不同的background-position

1. 设置格子在x轴上的位置

以左上角为原点（0，0），每个格子相对的位置就是calc(var(--w) * var(--x))，var(--x)是x轴上的位置偏移的倍数

2. 设置格子在y轴上的位置

以左上角为原点（0，0），每个格子相对的位置就是calc(var(--w) * var(--y))，var(--y)是y轴上的位置偏移的倍数

.grid {
    background-position: calc(var(--w) * var(--x)) calc(var(--w) * var(--y));
}

.grid:nth-child(1) {
    --x: 0;
    --y: 0;
}

.grid:nth-child(2) {
    --x: -1;
    --y: 0;
}

.grid:nth-child(3) {
    --x: -2;
    --y: 0;
}

.grid:nth-child(4) {
    --x: 0;
    --y: -1;
}

.grid:nth-child(5) {
    --x: -1;
    --y: -1;
}

.grid:nth-child(6) {
    --x: -2;
    --y: -1;
}

.grid:nth-child(7) {
    --x: 0;
    --y: -2;
}

.grid:nth-child(8) {
    --x: -1;
    --y: -2;
}

.grid:nth-child(9) {
    --x: -2;
    --y: -2;
}

看下定位后的效果吧

最后，我们加个动画效果，来看下一张图转变为九宫格图的变化效果。

.box {
    transition: all 1s;
}

.box:hover {
    filter: drop-shadow(0px 0px 10px rgb(80, 78, 78));
    gap: 0;
}

.box:hover .grid {
    border: none;
}

在线预览