鼠标移入移出时，盒子缓慢变大变小

最新推荐文章于 2022-02-23 15:05:48 发布

星期六六六六

最新推荐文章于 2022-02-23 15:05:48 发布

阅读量1.5k

点赞数 2

分类专栏：过渡缩放文章标签：前端 css

本文链接：https://blog.csdn.net/liuhuili_111/article/details/122680738

版权

过渡同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

缩放

1 篇文章 0 订阅

订阅专栏

实现鼠标移入移出时，盒子缓慢变大变小效果

<!DOCTYPE html>
<html lang="en">
<head>
  <title>test</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      margin: 20px auto ;
      background-color: pink;
  /* transition 别放hover里，放到盒子box里，这样移入移出一样缓慢，
  不然只对hover移上去有缓慢效果 */
      transition: all 1s;
    }
    .box:hover{
      transform: scale(1.1);  
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>