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

实现鼠标移动到图片上图片变大
  • 缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义

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

效果如下:

你可能感兴趣的:(HTML,css)