在前端页面开发中，实现元素放大缩小效果是非常常见的需求，比如卡片 hover 时轻微放大、点击按钮时缩放反馈等场景，使用 css 过渡配合 transform 属性的 scale 函数就能高效实现这类效果，且动画流畅性能表现优秀。
核心原理说明
要实现平滑的放大缩小效果，需要用到两个 css 属性：transition和transform。transition用于定义属性变化的过渡效果，包括过渡的属性、时长、速度曲线等；transform的scale函数用于设置元素的缩放比例，scale 值为 1 表示元素原始大小，大于 1 表示放大，小于 1 表示缩小。
transition 属性详解
transition是一个简写属性，完整语法为transition: property duration timing-function delay;，各参数含义如下：
- property：需要过渡的 css 属性名，这里我们需要过渡
transform属性 - duration：过渡持续的时间，单位可以是 s 或者 ms
- timing-function：过渡的速度曲线，比如
ease表示先快后慢，linear表示匀速 - delay：过渡开始前的延迟时间，可选参数
transform scale 函数说明
scale函数可以接收一个或两个参数：
- 接收一个参数时，同时设置水平和垂直方向的缩放比例，比如
scale(1.2)表示宽高都放大到原来的 1.2 倍 - 接收两个参数时，第一个是水平缩放比例，第二个是垂直缩放比例，比如
scale(1.2, 0.8)表示水平放大 1.2 倍，垂直缩小到 0.8 倍
基础实现示例
下面实现一个卡片 hover 时放大 1.1 倍，鼠标移出时恢复原始大小的效果：
/* 卡片基础样式 */
.card {
width: 200px;
height: 150px;
background-color: #f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/* 定义transform属性的过渡效果，时长0.3秒，速度曲线为ease */
transition: transform 0.3s ease;
/* 让卡片内的文字居中 */
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #333;
}
/* 鼠标悬停时放大1.1倍 */
.card:hover {
transform: scale(1.1);
}
对应的 html 结构如下：
<div class="card"> 悬停我查看放大效果 </div>
进阶使用场景
点击时缩放反馈
除了 hover 效果，还可以实现点击元素时的缩放反馈，比如按钮点击时先缩小再恢复：
.btn {
padding: 10px 20px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: transform 0.2s ease;
}
/* 点击时缩小到0.95倍 */
.btn:active {
transform: scale(0.95);
}
带延迟的缩放效果
如果需要过渡开始前有延迟，可以添加 delay 参数，比如下面的例子延迟 0.1 秒再开始过渡：
.delay-scale {
width: 100px;
height: 100px;
background-color: #ff4d4f;
transition: transform 0.3s ease 0.1s;
}
.delay-scale:hover {
transform: scale(1.2);
}
注意事项
- 使用
transform: scale()缩放元素时，不会改变元素在文档流中的占位大小，只是视觉上的缩放，不会影响其他元素的布局 - 如果需要对多个属性设置过渡，可以用逗号分隔，比如
transition: transform 0.3s ease, background-color 0.3s ease; - 缩放比例不要设置过大，否则可能导致元素模糊，尤其是位图元素，建议缩放比例控制在 0.5 到 2 之间
- 如果需要缩放时同时改变其他属性，比如透明度，可以一起添加到过渡属性中，实现更丰富的动画效果
完整示例演示
下面是一个包含多种缩放效果的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css过渡与transform scale示例</title>
<style>
.container {
display: flex;
gap: 30px;
padding: 30px;
flex-wrap: wrap;
}
.item {
width: 150px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: white;
font-size: 14px;
cursor: pointer;
}
.item1 {
background-color: #1890ff;
transition: transform 0.3s ease;
}
.item1:hover {
transform: scale(1.1);
}
.item2 {
background-color: #52c41a;
transition: transform 0.2s ease;
}
.item2:active {
transform: scale(0.9);
}
.item3 {
background-color: #faad14;
transition: transform 0.4s linear;
}
.item3:hover {
transform: scale(1.2, 0.8);
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">hover放大</div>
<div class="item item2">点击缩小</div>
<div class="item item3">非等比缩放</div>
</div>
</body>
</html>
css过渡transform_scale元素放大缩小前端动画修改时间：2026-07-05 23:21:32