使用CSS3實現滑鼠移到圖片上圖片放大
阿新 • • 發佈:2020-11-03
轉自http://www.webkaka.com/tutorial/html/2017/072731/
在現在的網頁設計中,滑鼠移到圖片上圖片放大的效果常常被用到,這個效果多應用於文章列表裡。我一開始以為是用JQuery來實現的,後來才知道原來是用CSS3來實現的。雖然用JQuery也能實現同樣的效果,但用CSS3來實現會更加簡單和方便。本文將介紹如何用CSS3來實現這個功能。
請把滑鼠移到圖片上
看到效果是:滑鼠移到圖片上時,圖片會自動放大。
CSS3實現方法如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body><div id="div1"> <img src="demo.jpg" /> </div> </body> </html>
程式碼分析:
1、首先知道DIV和IMG的層次關係,IMG是在某DIV裡面,圖片放大後不應該超出DIV的盒子。
2、設定DIV的overflow: hidden;屬性,作用是圖片變大後超過DIV區域的部分會自動隱藏。
3、設定transition: all 0.6s;屬性和transform: scale(1.4);屬性,其中transition: all 0.6s;是變化速度,數值越小速度越快,而transform: scale(1.4);是變化範圍,scale(1.4)
例項二:圖片放大不受限於DIV盒子
如果想圖片放大後完全顯示,而不是隻顯示DIV裡的區域,那麼我們只需把div的overflow屬性去掉即可,不能設為auto,否則div出現滾動條。效果演示如下:
請把滑鼠移到圖片上
html程式碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 0px; margin: 50px auto; /* overflow: hidden; */ } #div1 img{ cursor: pointer; transition: all 0.6s; } #div1 img:hover{ transform: scale(1.4); } </style> </head> <body> <div id="div1"> <img src="demo.jpg" /> </div> </body> </html>
程式碼分析:
把div的overflow屬性去掉,其他程式碼不變。