CSS实现鼠标悬停缩放

介绍

:hover 选择器

转换属性

转换属性

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