|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
純CSS實(shí)現(xiàn)的網(wǎng)格圖片(九宮圖)縮放效果
作者:admin 時(shí)間:2022-8-12 10:16:39 瀏覽:使用 CSS Grid，創(chuàng)建圖像網(wǎng)格很容易。不過本文不是介紹如何用 CSS Grid 創(chuàng)建圖像網(wǎng)絡(luò)，而是如何對這些網(wǎng)格圖片做點(diǎn)效果，例如懸停效果，即是鼠標(biāo)移到圖片上后，圖片會(huì)放大。
很酷，對吧？而這樣的效果，是用純CSS實(shí)現(xiàn)的，沒有任何 JavaScript，也沒有復(fù)雜的選擇器。
九宮圖網(wǎng)格
完整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>
代碼分析
構(gòu)建網(wǎng)格
創(chuàng)建網(wǎng)格的 HTML 代碼就像容器中的圖像列表一樣簡單。我們不需要太多代碼，不用太過復(fù)雜的結(jié)構(gòu)。
<div class="gallery">
<img>
<img>
<img>
<!-- etc. -->
</div>
對于 CSS，我們首先使用以下設(shè)置網(wǎng)格：
.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);
}簡而言之，我們有兩個(gè)變量，一個(gè)控制圖像的大小，一個(gè)設(shè)置圖像之間的間隙大小。aspect-ratio有助于保持比例。
圖像樣式設(shè)置
我們有了網(wǎng)格，就可以為圖像設(shè)置樣式了：
.gallery > img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}我們制作的懸停效果依賴于這個(gè) CSS。
創(chuàng)建懸停效果
我們需要做的是在圖像懸停時(shí)增加圖像的比例。我們可以通過:hover調(diào)整圖像的width和height來做到這一點(diǎn)：
.gallery {
--f: 1.5; /* controls the scale factor */
}
.gallery img:hover{
width: calc(var(--s) * var(--f));
height: calc(var(--s) * var(--f));
}我添加了一個(gè)新的自定義變量 ，--f作為比例因子來控制懸停時(shí)的大小。請注意我如何將大小變量--s乘以它來計(jì)算新的圖像大小。
添加更多圖像
不止是九宮圖網(wǎng)格，我們可以將列數(shù)和行數(shù)設(shè)為變量，并根據(jù)需要添加任意數(shù)量的圖像。下面網(wǎng)格是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>
代碼分析
我們可以將列數(shù)和行數(shù)設(shè)為變量，并根據(jù)需要添加任意數(shù)量的圖像。
.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);
}我們有兩個(gè)用于行數(shù)和列數(shù)的新變量。然后我們只需使用它們定義網(wǎng)格的寬度和高度。同樣grid-template-columns使用--m變量。和以前一樣，我們不需要顯式定義行，因?yàn)闊o論我們使用多少圖像元素，CSS Grid 的自動(dòng)放置功能都會(huì)為我們完成這項(xiàng)工作。
總結(jié)
本文介紹了純CSS實(shí)現(xiàn)的網(wǎng)格圖片(九宮圖)縮放效果，在本文中，我們依靠一些 CSS Grid 大小技巧來創(chuàng)建一個(gè)精美的圖像網(wǎng)格，在懸停時(shí)縮放并導(dǎo)致網(wǎng)格相應(yīng)地調(diào)整。所有這一切都通過使用 CSS 變量輕松調(diào)整的簡化代碼實(shí)現(xiàn)。
相關(guān)文章
- 圖片SVG、PNG、JPEG、GIF有什么不同？
- 哪種圖像文件更好：SVG 還是 PNG？
- 6種Web圖像文件優(yōu)缺點(diǎn)比較：JPEG/PNG/SVG/GIF/BMP/WebP
- 純CSS：將圖片漂浮固定在某DIV內(nèi)右下角
- 【JQuery插件】把網(wǎng)頁或某div或table表格內(nèi)容轉(zhuǎn)為圖片并下載
- 16款精美的CSS3動(dòng)畫按鈕（有懸停動(dòng)畫效果）
- 9個(gè)CSS鼠標(biāo)懸停效果
- 6個(gè)CSS按鈕邊框過渡動(dòng)畫效果
- 一個(gè)具有伸縮（鼠標(biāo)懸停）效果的CSS按鈕
- 使用box-shadow實(shí)現(xiàn)的7個(gè)按鈕懸停效果
- 純CSS3：鼠標(biāo)移上去三角形(箭頭)旋轉(zhuǎn)【實(shí)例演示#源碼下載】
- CSS懸停效果按鈕一簡單實(shí)例（鼠標(biāo)移到按鈕上變成其他顏色）
- 漂亮的css3圓形鼠標(biāo)懸停效果實(shí)例
- 使用css轉(zhuǎn)換和3d旋轉(zhuǎn)的圓形鼠標(biāo)懸停效果【2例】
- 很好看的css3動(dòng)畫按鈕鼠標(biāo)懸停效果【2個(gè)實(shí)例】
- 漂亮懸停效果的CSS3動(dòng)畫按鈕【5個(gè)實(shí)例代碼】
標(biāo)簽: image 網(wǎng)格圖片縮放效果 九宮圖縮放效果
- 站長推薦
