css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）
- 藏色散人原创
- 2018-10-12 13:44:3413941浏览
本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法。
当我们在浏览各大电商网站时，最常见的图片动态效果，应该就是鼠标移入图片即悬停在图片时出现放大的效果了。实现这样的动态效果主要是为了突出产品内容，提高用户体验。
对于代码小白来说，这样的效果固然很吸引人但是想要通过html/css代码实现，可能一时不知道从何处下手。
其实代码实现是非常简单，下面我们就通过简单的示例，给大家介绍实现鼠标经过图片放大的方法。
鼠标移入图片放大效果的html/css代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html/Css3实现图片缩放</title>
<style type="text/css">
#div1{
width: 500px;
margin: 150px auto;
}
#div1 img{
transition: all 0.5s;
border-radius:5px;
border: #eee solid 2px;
}
#div1 img:hover{
transform: scale(1.5);
}
</style>
</head>
<body style="background: #000">
<div id="div1">
<img src="123123.png" />
</div>
</body>
</html>首先前台访问，图片效果如下图所示：
然后我们将鼠标悬停在图片时，效果如下图：
从图中显然可以发现图片被放大了。
本段代码大家可以直接复制在本地测试，这里主要用到的一些css/css3属性有：
border-radius：向 div 元素添加圆角边框。
:hover 选择器用于选择鼠标指针浮动在上面的元素。
transform ：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中，值scale(x,y) 定义 2D 缩放转换。（本示例设置图片缩放1.5倍）
transition：一个简写属性，用于设置四个过渡属性。（本示例设置图片放大时的过渡时间为0.5秒，避免效果过于突兀）
本篇文章就是关于用html/css/css3实现当鼠标经过图片时放大的效果介绍。非常简单易懂，希望对需要的朋友有所帮助！
想要了解跟多HTML/css知识，可以关注PHP中文网HTML视频教程和CSS视频教程、CSS3视频教程，欢迎大家参考学习！
以上是css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn