css3如何實現滑鼠放上圖片放大？（附代碼）-css教學-PHP中文網

首頁

web前端

css教學

css3如何實現滑鼠放上圖片放大？（附代碼）

不言

Oct 10, 2018 pm 02:10 PM

css3圖片放大

在css3的學習中，我們會經常做一些小的動畫效果，這感覺非常有趣，所以今天的這篇文章將給大家來介紹關於css3實現圖片放大的一個效果，有興趣的小伙伴可以看一下。

我們都知道css3增加了一個transform屬性應用於元素的2D或3D轉換，transform屬性允許我們對元素進行旋轉、縮放、移動或傾斜。所以css3實作圖片放大是需要用到transform屬性的，下面我們就來看看css3使用transform屬性實現圖片放大的效果。

第一種：css3實作當我們把滑鼠放到圖片上圖片放大並且超出部分不隱藏的效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
    width: 300px;
    height: 300px;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.2);
    -ms-transform: scale(1.2);
}
</style>
</head>
<body>
<div class="enlarge">
    <img src="/static/imghwm/default1.png"  data-src="images/tu.jpg"  class="lazy"   alt="图片"/>
</div>      
</body>
</html>

##css3實現滑鼠放上圖片放大的效果前後比較如下：

, css3如何實現滑鼠放上圖片放大？（附代碼）

「第二種滑鼠css3實現當我們將滑鼠放到圖片上。圖片放大且超出部分隱藏的效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
    width: 300px;
    height: 300px;
    overflow: hidden;
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.3);
    -ms-transform: scale(1.3);
}
</style>
</head>
<body>
<div class="enlarge">
    <img src="/static/imghwm/default1.png"  data-src="images/tu.jpg"  class="lazy"   alt="图片"/>
</div>      
</body>
</html>

css3實現滑鼠放上圖片放大的效果前後比較如下：

css3如何實現滑鼠放上圖片放大？（附代碼）說明：對於上述的兩種css3實現圖片放大的情況，都用到了:hover偽類，表示了滑鼠懸停時候的狀態，這樣當我們把滑鼠放到圖片上的時候就會讓圖片放大，當滑鼠移除，圖片就會恢復原有的大小。