鼠标移入放大图片

一个程序员的春天

已于 2022-02-23 11:45:41 修改

阅读量520

点赞数

CC 4.0 BY-SA版权

分类专栏： css 编辑器文章标签： css3 css javascript 前端 div

于 2022-02-23 11:44:20 首次发布

本文链接：https://blog.csdn.net/weixin_44186787/article/details/123086544

css 同时被 2 个专栏收录

2 篇文章

订阅专栏

编辑器

1 篇文章

订阅专栏

本文介绍如何使用HTML和CSS3创建一个点击时图片放大效果的网页，通过CSS hover伪类实现过渡效果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            border: #000 solid 1px;
            margin: 50px auto;
            overflow: hidden;
        }

        div img {
            cursor: pointer;
            transition: all 0.6s;
        }

        div:hover {
            transform: scale(1.4);
        }
    </style>
</head>

<body>
    <div>
        <img src="https://img0.baidu.com/it/u=553569124,3531403696&fm=253&fmt=auto&app=120&f=JPEG?w=960&h=600" alt="">
    </div>
</body>

</html>