CSS 实现鼠标移动到图片上图片变大

实现鼠标移动到图片上图片变大缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义<!DOCTYPE html><html><head><meta charset="UTF-8"><title>图片的缩放</title><style type="text/css">div {width: 500p

西柚521

10160人浏览 · 2021-07-21 13:52:34

西柚521 · 2021-07-21 13:52:34 发布

实现鼠标移动到图片上图片变大

缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片的缩放</title>
    <style type="text/css">
        div {
            width: 500px;
            height: 500px;
            border: #000 solid 1px;
            margin: 50px auto;
            overflow: hidden;
        }

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

        div img:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
<div>
    <img src="img/focus.png"/>
</div>
</body>
</html>