css3如何實現滑鼠放上圖片放大？ （附代碼）
- 不言原創
- 2018-10-10 14:10:4713646瀏覽
在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="images/tu.jpg" alt="图片"/>
</div>
</body>
</html>##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="images/tu.jpg" alt="图片"/>
</div>
</body>
</html>
css3實現滑鼠放上圖片放大的效果前後比較如下：
說明：對於上述的兩種css3實現圖片放大的情況，都用到了:hover偽類，表示了滑鼠懸停時候的狀態，這樣當我們把滑鼠放到圖片上的時候就會讓圖片放大，當滑鼠移除，圖片就會恢復原有的大小。
以上就是本篇文章的全部內容了，關於css3中的transform屬性更詳細的用法，大家可以參考
css3學習手冊以上是css3如何實現滑鼠放上圖片放大？ （附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn