鼠标放上去图片变大(自用)

最新推荐文章于 2023-03-13 14:26:40 发布

柑子~

最新推荐文章于 2023-03-13 14:26:40 发布

阅读量162

点赞数

分类专栏： html 文章标签： css javascript html

本文链接：https://blog.csdn.net/apppws/article/details/126948409

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主要是记录css【transition和transform】

<!DOCTYPE html>
<html>

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

    #div1 img {
      cursor: pointer;
      width: 200px;
      height: 138px;
      transition: all 0.6s;
    }

    #div1 img:hover {
      transform: scale(1.4);
    }
  </style>
</head>

<body>
  <div id="div1">
    <img src="./demo.jpg" />
  </div>
</body>

</html>