css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）-css知识-PHP中文网

css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）

藏色散人

发布： 2018-10-12 13:44:34

原创

15053人浏览过

本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法。

当我们在浏览各大电商网站时，最常见的图片动态效果，应该就是鼠标移入图片即悬停在图片时出现放大的效果了。实现这样的动态效果主要是为了突出产品内容，提高用户体验。

对于代码小白来说，这样的效果固然很吸引人但是想要通过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">
    @@##@@
</div>
</body>
</html>

登录后复制

首先前台访问，图片效果如下图所示：

css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）

然后我们将鼠标悬停在图片时，效果如下图：