站長資訊網(wǎng)在文章《利用CSS3創(chuàng)建炫酷的三角背景圖像》中，我們介紹了利用CSS3創(chuàng)建炫酷的三角背景圖像的方法，讓網(wǎng)頁顯得高級感十足！這次我們來聊聊如何使用純CSS3實現(xiàn)鼠標(biāo)懸停圖片放大特效，感興趣的朋友可以去了解一下~
鼠標(biāo)懸停圖片放大特效是一個非常有用且吸引眼球的特效，可以給網(wǎng)頁添加互動性，當(dāng)用戶懸停鼠標(biāo)在圖片上，圖片會稍微的放大。適用于圖片展示頁面，可以大大的提升用戶的體驗感！
下面我們就先直接上代碼：
<!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>
效果如下圖所示：
OK，下面來分析一下上面的代碼：
首先創(chuàng)建一個div包裹img標(biāo)簽，該div容器的作用是：遮擋住圖片，當(dāng)圖片放大時，不讓圖片超出我們規(guī)定的寬高以外。想要讓div實現(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); }
然后就是實現(xiàn)圖片放大效果了，我這里使用的是transform: scale(1,1)樣式。transform屬性可以向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換，而scale是用于放大（整數(shù)就會放大）或者縮?。ㄘ摂?shù)就會縮小）元素的。
.img-wrapper img { height: 220px; } .img-wrapper img:hover { transform: scale(1.1); }
這樣實現(xiàn)的圖片放大效果是突兀的，鼠標(biāo)懸停就突然放大了，可以使用transition屬性添加一個過渡效果，因為該屬性是css3的一個新屬性，要添加前綴來兼容其他瀏覽器
.img-wrapper img { height: 220px; -webkit-transition: 0.3s linear; /* 兼容谷歌瀏覽器 */ transition: 0.3s linear; }
這樣就實現(xiàn)鼠標(biāo)懸停圖片放大效果了。但是這樣的放大效果有點單調(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); }
濾鏡屬性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)換為深褐色。
PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
