中日韩国极品内精品视频,人成视频在线另类春色

技術(shù)頻道 - html技術(shù)

純CSS實現(xiàn)的網(wǎng)格圖片(九宮圖)縮放效果

作者:admin 時間:2022-8-12 10:16:39 瀏覽:

使用 CSS Grid，創(chuàng)建圖像網(wǎng)格很容易。不過本文不是介紹如何用 CSS Grid 創(chuàng)建圖像網(wǎng)絡(luò)，而是如何對這些網(wǎng)格圖片做點效果，例如懸停效果，即是鼠標移到圖片上后，圖片會放大。

純CSS實現(xiàn)的網(wǎng)格圖片(九宮圖)縮放效果

很酷，對吧？而這樣的效果，是用純CSS實現(xiàn)的，沒有任何 JavaScript，也沒有復雜的選擇器。

九宮圖網(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>

demo download

代碼分析

構(gòu)建網(wǎng)格

創(chuàng)建網(wǎng)格的 HTML 代碼就像容器中的圖像列表一樣簡單。我們不需要太多代碼，不用太過復雜的結(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);
}

簡而言之，我們有兩個變量，一個控制圖像的大小，一個設(shè)置圖像之間的間隙大小。aspect-ratio有助于保持比例。

圖像樣式設(shè)置

我們有了網(wǎng)格，就可以為圖像設(shè)置樣式了：

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

我們制作的懸停效果依賴于這個 CSS。

創(chuàng)建懸停效果

我們需要做的是在圖像懸停時增加圖像的比例。我們可以通過:hover調(diào)整圖像的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乘以它來計算新的圖像大小。

添加更多圖像

不止是九宮圖網(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>

demo download

代碼分析

我們可以將列數(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);
}

我們有兩個用于行數(shù)和列數(shù)的新變量。然后我們只需使用它們定義網(wǎng)格的寬度和高度。同樣grid-template-columns使用--m變量。和以前一樣，我們不需要顯式定義行，因為無論我們使用多少圖像元素，CSS Grid 的自動放置功能都會為我們完成這項工作。

總結(jié)

本文介紹了純CSS實現(xiàn)的網(wǎng)格圖片(九宮圖)縮放效果，在本文中，我們依靠一些 CSS Grid 大小技巧來創(chuàng)建一個精美的圖像網(wǎng)格，在懸停時縮放并導致網(wǎng)格相應(yīng)地調(diào)整。所有這一切都通過使用 CSS 變量輕松調(diào)整的簡化代碼實現(xiàn)。

相關(guān)文章