css过渡动画，鼠标移上去就变大（缓慢变大、过渡效果、放大的过程是过渡动画的，这个过渡动画是有时间控制的）

比眉伴天荒 2022-10-02 10:57 216阅读 0赞

<template>
      <div>
        <div class="li">
          <img src="../assets/123.jpg" alt>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      props: {},
      data() {
        return {};
      },
      methods: {},
      components: {},
      mounted() {}
    };
    </script>
    
    <style  lang="scss">
    .li {
      width: 300px;
      height: 300px;
      border: #000 solid 1px;//设置div的边框
      margin: 50px auto;
      overflow: hidden;//overflow 属性规定当内容溢出元素框时发生的事情。http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
    }
    .li img {
      cursor: pointer;//cursor 属性规定要显示的光标的类型（形状）
      transition: all 0.6s;//设置图片变大的属性，表示所有的属性变化在0.6s的时间段内完成。https://www.cnblogs.com/afighter/p/5731293.html
    }
    .li img:hover {
      transform: scale(4,4);//表示在鼠标放到图片上的时候图片按比例放大4.4倍。https://www.cnblogs.com/xiaoxingyiyi/articles/4838648.html
    }
    </style>

#### 注：overflow属性详见：[http://www.w3school.com.cn/cssref/pr\_pos\_overflow.asp][http_www.w3school.com.cn_cssref_pr_pos_overflow.asp] ####

#### transition属性详见：[https://www.cnblogs.com/afighter/p/5731293.html][https_www.cnblogs.com_afighter_p_5731293.html] ####

#### transform属性详见：[https://www.cnblogs.com/xiaoxingyiyi/articles/4838648.html][https_www.cnblogs.com_xiaoxingyiyi_articles_4838648.html] ####

#### cursor属性详见：[http://www.w3school.com.cn/cssref/pr\_class\_cursor.asp][http_www.w3school.com.cn_cssref_pr_class_cursor.asp] ####

[http_www.w3school.com.cn_cssref_pr_pos_overflow.asp]: http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
[https_www.cnblogs.com_afighter_p_5731293.html]: https://www.cnblogs.com/afighter/p/5731293.html
[https_www.cnblogs.com_xiaoxingyiyi_articles_4838648.html]: https://www.cnblogs.com/xiaoxingyiyi/articles/4838648.html
[http_www.w3school.com.cn_cssref_pr_class_cursor.asp]: http://www.w3school.com.cn/cssref/pr_class_cursor.asp