|
|
|
|
|
|
純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 變量輕松調整的簡化代碼實現。
相關文章
