怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果

發(fā)布時間：2021-08-21 09:48:24 來源：億速云閱讀：244 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果”吧！

鼠標(biāo)懸停圖片放大特效是一個非常有用且吸引眼球的特效，可以給網(wǎng)頁添加互動性，當(dāng)用戶懸停鼠標(biāo)在圖片上，圖片會稍微的放大。適用于圖片展示頁面，可以大大的提升用戶的體驗(yàn)感！

下面我們就先直接上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.img-wrapper {
  width: 220px;
  height: 220px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid #000;
}
/* ============== 
* 灰度濾鏡
* ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ============== 
* 深褐色濾鏡
* ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}


</style>
</head>
<body>
<div class="img-wrapper">
  <img src="demo/img/1.jpg"/>
</div>
<!-- 灰度濾鏡 -->
<div class="img-wrapper">
  <img class="grayscale-img" src="demo/img/1.jpg"/>
</div>

<!-- 深褐色濾鏡 -->
<div class="img-wrapper">
  <img class="sepia-img" src="demo/img/1.jpg"
  />
</div>

</body>
</script>
</body>
</html>

效果如下圖所示：

怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果

OK，下面來分析一下上面的代碼：

首先創(chuàng)建一個div包裹img標(biāo)簽，該div容器的作用是：遮擋住圖片，當(dāng)圖片放大時，不讓圖片超出我們規(guī)定的寬高以外。想要讓div實(shí)現(xiàn)這個作用，就需要一個關(guān)鍵樣式overflow: hidden；這樣當(dāng)圖片放大時，超出部分會被隱藏。

<div class="img-wrapper">
  <img src="demo/img/1.jpg"/>
</div>

.img-wrapper {
  width: 220px;
  height: 220px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

然后就是實(shí)現(xiàn)圖片放大效果了，我這里使用的是transform: scale(1,1)樣式。transform屬性可以向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換，而scale是用于放大（整數(shù)就會放大）或者縮小（負(fù)數(shù)就會縮?。┰氐摹?/p>

.img-wrapper img {
  height: 220px;
}
.img-wrapper img:hover {
  transform: scale(1.1);
}

怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果

這樣實(shí)現(xiàn)的圖片放大效果是突兀的，鼠標(biāo)懸停就突然放大了，可以使用transition屬性添加一個過渡效果，因?yàn)樵搶傩允莄ss3的一個新屬性，要添加前綴來兼容其他瀏覽器

.img-wrapper img {
  height: 220px;
  -webkit-transition: 0.3s linear;  /* 兼容谷歌瀏覽器 */
  transition: 0.3s linear;
}

怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果

這樣就實(shí)現(xiàn)鼠標(biāo)懸停圖片放大效果了。但是這樣的放大效果有點(diǎn)單調(diào)，我們可以給圖片設(shè)置濾鏡屬性filter，來讓圖片放大效果更炫酷！

我們可以先讓圖片變灰（filter: grayscale(100%)）或者變深褐色（filter: sepia(100%)），然后鼠標(biāo)懸停時，在圖片放大的同時出現(xiàn)顏色變幻（去掉濾鏡效果即可），這樣就會讓特效更炫酷。

<!-- 灰度濾鏡 -->
<div class="img-wrapper">
  <img class="grayscale-img" src="demo/img/1.jpg"
  />
</div>

.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}



<!-- 深褐色濾鏡 -->
<div class="img-wrapper">
  <img
    class="sepia-img"
    src="demo/img/1.jpg"
  />
</div>

.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果

濾鏡屬性filter定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。

可以設(shè)置的濾鏡效果：
blur(px)：給圖像設(shè)置高斯模糊。    
brightness(%)：給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。    
contrast(%) ：調(diào)整圖像的對比度。    
drop-shadow(h-shadow v-shadow blur spread color)：給圖像設(shè)置一個陰影效果。
grayscale(%)：將圖像轉(zhuǎn)換為灰度圖像
hue-rotate(deg) ：給圖像應(yīng)用色相旋轉(zhuǎn)。
invert(%) ：反轉(zhuǎn)輸入圖像。
opacity(%)：轉(zhuǎn)化圖像的透明程度。
saturate(%)： 轉(zhuǎn)換圖像飽和度。
sepia(%) ： 將圖像轉(zhuǎn)換為深褐色。

感謝各位的閱讀，以上就是“怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

怎么用純CSS3創(chuàng)建鼠標(biāo)懸停圖片時圖像放大效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽