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

最新推荐文章于 2024-05-23 10:56:36 发布

erdouzhang

最新推荐文章于 2024-05-23 10:56:36 发布

阅读量1w

点赞数 4

分类专栏：图片 html5+css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/60966428

版权

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

20 篇文章 0 订阅

订阅专栏

图片

4 篇文章 0 订阅

订阅专栏

在线演示

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

这里写图片描述

代码：

<!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>

解析：

transform:scale()可以实现按比例放大或者缩小功能。
transition允许CSS的属性值在一定的时间区间内平滑过渡
可以调节放大倍数以及放大过程所用时间。

erdouzhang

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原

在线演示鼠标经过或悬停时，图片会缓慢放大；鼠标离开，图片缓慢还原。下图分别为：原图、鼠标经过代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{
复制链接

扫一扫