CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原

最新推荐文章于 2022-07-13 10:37:21 发布

原创最新推荐文章于 2022-07-13 10:37:21 发布 · 1w 阅读

11 ·

CC 4.0 BY-SA版权

html5+css3 同时被 2 个专栏收录

20 篇文章

订阅专栏

图片

4 篇文章

订阅专栏

本文介绍了一种使用CSS实现的图片缩放效果，当鼠标悬停在图片上时，图片会平滑放大到指定的比例，鼠标移开时则平滑还原。通过调整CSS中的scale参数和transition属性可以改变图片放大的速度和倍数。

在线演示

鼠标经过或悬停时，图片会缓慢放大；鼠标离开，图片缓慢还原。
下图分别为：原图、鼠标经过

这里写图片描述

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 250px;
                margin: 50px auto;
                overflow: hidden;
            }
            div img{
                width: 100%;
                cursor: pointer;
                transition: all 0.6s;/*图片放大过程的时间*/
            }
            div img:hover{
                transform: scale(1.2);/*鼠标经过图片放大的倍数*/
            }
        </style>
    </head>
    <body>
        <div>
            <img src="images/01.jpg" />
        </div>
    </body>
</html>