在网页设计中，文字缩放动画常用于吸引用户注意力或增强交互反馈。使用CSS的transform: scale()配合@keyframes可以纯样式实现文字放大缩小的动态效果，不需要写JavaScript。
一、核心原理
transform: scale(x)用来对元素进行二维缩放，x大于1表示放大，小于1表示缩小。@keyframes用来定义动画在不同进度点的样式状态。把两者结合，就是让文字在动画过程中不断变化scale值。
二、基础代码示例
下面是一段让文字不停脉冲缩放的完整CSS代码：
/* 定义名为 textZoom 的关键帧动画 */
@keyframes textZoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
/* 将动画应用到文字元素 */
.zoom-text {
display: inline-block;
font-size: 24px;
animation: textZoom 2s ease-in-out infinite;
}
代码说明
- @keyframes textZoom 中 0%、50%、100% 分别对应动画开始、中间、结束时的状态。
- transform: scale(1.5) 表示在中间时刻放大到原来的1.5倍。
- animation 简写属性依次设置动画名称、时长、速度曲线和循环次数，infinite 表示无限循环。
三、常用参数调整
| 属性 | 作用 | 示例值 |
|---|---|---|
| animation-duration | 单次动画时长 | 1.5s |
| animation-timing-function | 速度变化曲线 | ease, linear |
| animation-iteration-count | 播放次数 | 3, infinite |
四、注意事项
使用 transform: scale() 时，若元素不是行内块或块级元素，缩放可能不生效，可先设置 display: inline-block。另外，频繁缩放大量文字可能影响渲染性能，建议仅在必要位置使用。
提示：如果需要只缩放文字宽度而不改变高度，可使用 scaleX()；只改变高度用 scaleY()。
五、悬停触发缩放
除了自动循环，也可以让鼠标悬停时才缩放：
.hover-zoom {
display: inline-block;
transition: transform 0.3s ease;
}
.hover-zoom:hover {
transform: scale(1.3);
}
这种方式用 transition 补间变换，体验更轻量，适合按钮或链接文字的交互反馈。
CSS动画transform_scale@keyframes修改时间：2026-07-29 17:18:16