当前位置：首页 > 文章列表 > 文章 > 前端 > CSS图标缩放动画怎么实现

CSS图标缩放动画怎么实现

2026-02-09 23:25:36 0浏览收藏

定义scale关键帧动画

使用@keyframes创建一个名为scale的动画，控制元素的缩放比例。

例如，实现一个循环的呼吸式缩放效果：

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

这个动画从正常大小（1倍）放大到1.2倍，再回到原始大小，形成“放大-缩小”的循环。

应用动画到图标

将定义好的动画绑定到目标图标元素上，设置持续时间、重复方式等参数。

.icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #007acc;
  border-radius: 50%;
  animation: scale 1.5s infinite ease-in-out;
}

说明：

animation: scale 指定使用的动画名称
1.5s 表示动画周期为1.5秒
infinite 让动画无限循环
ease-in-out 控制动画速度曲线，先慢后快再慢，更自然

触发式缩放（如鼠标悬停）

如果不需要持续动画，而是希望用户交互时触发，可以省略@keyframes，直接用transition实现平滑过渡。

.icon-hover {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #4caf50;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.icon-hover:hover {
  transform: scale(1.3);
}

当鼠标移到图标上时，图标放大至1.3倍，移开后平滑恢复。这种方式性能好，适合按钮、链接等交互元素。