首页 > 文章 > web前端 > css3如何实现鼠标放上图片放大？（附代码）

css3如何实现鼠标放上图片放大？（附代码）

不言原创: 2018-10-10 14:10:4713701浏览

在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实现鼠标放上图片放大的效果前后对比如下：

2345截图20181010135649.png 2345截图20181010135700.png

第二种：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实现鼠标放上图片放大的效果前后对比如下：

2345截图20181010135951.png 2345截图20181010140326.png

说明：对于上述的两种css3实现图片放大的情况，都用到了:hover伪类，表示了鼠标悬停时候的状态，这样当我们把鼠标放到图片上的时候就会让图片放大，当鼠标移除，图片就会恢复原有的大小。

以上就是本篇文章的全部内容了，关于css3中的transform属性更详细的用法，大家可以参考css3学习手册进一步的了解。

以上是css3如何实现鼠标放上图片放大？（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

css3 伪类 transform

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：css如何设置段落间距？margin 属性设置段落间距（代码实例）下一篇：css如何使用内边距来调整段落间距？（代码实例）

查看更多

用css实现图片放大镜效果实例详解（图）