纯CSS实现的网格图片(九宫图)缩放效果
作者:admin 时间:2022-8-12 10:16:39 浏览:使用 CSS Grid，创建图像网格很容易。不过本文不是介绍如何用 CSS Grid 创建图像网络，而是如何对这些网格图片做点效果，例如悬停效果，即是鼠标移到图片上后，图片会放大。
很酷，对吧？而这样的效果，是用纯CSS实现的，没有任何 JavaScript，也没有复杂的选择器。
九宫图网格
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.gallery {
--s: 150px; /* 图片大小 */
--g: 10px; /* 图片间距 */
--f: 1.5; /* 缩放比例 */
display: grid;
gap: var(--g);
width: calc(3*var(--s) + 2*var(--g));
aspect-ratio: 1;
grid-template-columns: repeat(3,auto);
}
.gallery > img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(80%);
transition: .35s linear;
}
.gallery img:hover{
filter: grayscale(0);
width: calc(var(--s)*var(--f));
height: calc(var(--s)*var(--f));
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #60c4ff;
}
</style>
</head>
<body translate="no" >
<div class="gallery">
<img src="picture/pic-1.jpg" >
<img src="picture/pic-2.jpg" >
<img src="picture/pic-3.jpg" >
<img src="picture/pic-4.jpg" >
<img src="picture/pic-5.jpg" >
<img src="picture/pic-6.jpg" >
<img src="picture/pic-7.jpg" >
<img src="picture/pic-8.jpg" >
<img src="picture/pic-9.jpg" >
</div>
</body>
</html>
代码分析
构建网格
创建网格的 HTML 代码就像容器中的图像列表一样简单。我们不需要太多代码，不用太过复杂的结构。
<div class="gallery">
<img>
<img>
<img>
<!-- etc. -->
</div>
对于 CSS，我们首先使用以下设置网格：
.gallery {
--s: 150px; /* 控制大小 */
--g: 10px; /* 控制间距 */
display: grid;
gap: var(--g);
width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
aspect-ratio: 1;
grid-template-columns: repeat(3, auto);
}简而言之，我们有两个变量，一个控制图像的大小，一个设置图像之间的间隙大小。aspect-ratio有助于保持比例。
图像样式设置
我们有了网格，就可以为图像设置样式了：
.gallery > img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}我们制作的悬停效果依赖于这个 CSS。
创建悬停效果
我们需要做的是在图像悬停时增加图像的比例。我们可以通过:hover调整图像的width和height来做到这一点：
.gallery {
--f: 1.5; /* controls the scale factor */
}
.gallery img:hover{
width: calc(var(--s) * var(--f));
height: calc(var(--s) * var(--f));
}我添加了一个新的自定义变量 ，--f作为比例因子来控制悬停时的大小。请注意我如何将大小变量--s乘以它来计算新的图像大小。
添加更多图像
不止是九宫图网格，我们可以将列数和行数设为变量，并根据需要添加任意数量的图像。下面网格是3行x4列。
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.gallery {
--n: 3; /* number of rows*/
--m: 4; /* number of columns */
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
grid-template-columns: repeat(var(--m),auto);
}
.gallery > img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(80%);
transition: .35s linear;
}
.gallery img:hover{
filter: grayscale(0);
width: calc(var(--s)*var(--f));
height: calc(var(--s)*var(--f));
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #60c4ff;
}
</style>
</head>
<body translate="no" >
<div class="gallery">
<img src="picture/pic-1.jpg" >
<img src="picture/pic-2.jpg" >
<img src="picture/pic-3.jpg" >
<img src="picture/pic-4.jpg" >
<img src="picture/pic-5.jpg" >
<img src="picture/pic-6.jpg" >
<img src="picture/pic-7.jpg" >
<img src="picture/pic-8.jpg" >
<img src="picture/pic-9.jpg" >
<img src="picture/pic-10.jpg" >
<img src="picture/pic-11.jpg" >
<img src="picture/pic-12.jpg" >
</div>
</body>
</html>
代码分析
我们可以将列数和行数设为变量，并根据需要添加任意数量的图像。
.gallery {
--n: 3; /* number of rows*/
--m: 4; /* number of columns */
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
display: grid;
gap: var(--g);
width: calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
grid-template-columns: repeat(var(--m),auto);
}我们有两个用于行数和列数的新变量。然后我们只需使用它们定义网格的宽度和高度。同样grid-template-columns使用--m变量。和以前一样，我们不需要显式定义行，因为无论我们使用多少图像元素，CSS Grid 的自动放置功能都会为我们完成这项工作。
总结
本文介绍了纯CSS实现的网格图片(九宫图)缩放效果，在本文中，我们依靠一些 CSS Grid 大小技巧来创建一个精美的图像网格，在悬停时缩放并导致网格相应地调整。所有这一切都通过使用 CSS 变量轻松调整的简化代码实现。
相关文章
相关文章
x
- 站长推荐
