CSS实现鼠标悬停缩放

介绍

:hover 选择器

选择器	示例	示例说明	CSS
:hover	a:hover	选择鼠标在链接上面时	1

转换属性

Property	描述	CSS
transform	适用于2D或3D转换的元素	3

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

运行结果

代码

HTML

      <div id="box">
        <ul class="box-card">
          <li v-for="(item, index) in list" :key="index">
            <el-card>
              <div>
                <p>鼠标悬停</p>
              </div>
            </el-card>
          </li>
        </ul>
      </div>

CSS

.box-card :hover {
  transform: scale(1.1);
  transition: all 1s ease 0s;
  -webkit-transform: scale(1.1);//-webkit-解决浏览器兼容问题
  -webkit-transform: all 1s ease 0s;
}