如何通过css animation实现图标旋转与缩放效果-css教程-PHP中文网

如何通过css animation实现图标旋转与缩放效果

P粉602998670

发布： 2025-10-04 13:27:02

原创

849人浏览过

通过CSS的@keyframes定义旋转和缩放动画，使用animation属性应用到图标元素，可实现持续或hover触发的动效。例如：@keyframes spinAndScale { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.5); } }，并设置.icon { animation: spinAndScale 2s ease-in-out infinite; }实现无限循环动画，结合:hover可控制动画触发时机，适用于字体或SVG图标。

如何通过css animation实现图标旋转与缩放效果

要实现图标旋转与缩放效果，可以通过 CSS 的 @keyframes 和 animation 属性来控制。这种方式适用于字体图标、SVG 图标或任何带有图标的元素。

1. 定义关键帧动画

使用 @keyframes 创建旋转和缩放的动画过程。

// 旋转 + 缩放动画定义

@keyframes spinAndScale {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1.5);
  }
}

登录后复制

这个动画从无旋转、原始大小开始，到完整旋转一圈并放大 1.5 倍结束。

2. 应用动画到图标

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

立即学习“前端免费学习笔记（深入）”；

// 给图标应用动画

.icon {
  display: inline-block;
  animation: spinAndScale 2s ease-in-out infinite;
}

登录后复制

说明：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

2s：动画持续 2 秒
ease-in-out：速度曲线，先慢后快再慢
infinite：无限循环播放

3. 可选：hover 触发动画

如果只想在鼠标悬停时触发动画，可以结合 :hover 使用。

.icon:hover {
  animation: spinAndScale 1s ease-out forwards;
}

登录后复制

这时动画只在 hover 时运行一次，forwards 表示动画结束后保持最终状态。

4. 实际使用示例（HTML + CSS）

以一个简单的 div 图标为例：

<!-- HTML -->
<div class="icon">?</div>
<p><!-- CSS -->
.icon {
font-size: 24px;
cursor: pointer;
animation: spinAndScale 2s linear infinite;
}</p><p>@keyframes spinAndScale {
0% {
transform: rotate(0deg) scale(1);
}
100% {
transform: rotate(360deg) scale(1.5);
}
}

登录后复制

你也可以把 transform-origin 设为中心点确保旋转围绕中心进行（默认已是 center，一般无需修改）。

基本上就这些。通过组合 rotate() 和 scale()，配合灵活的 timing function 与循环设置，就能做出流畅的图标动效。

以上就是如何通过css animation实现图标旋转与缩放效果的详细内容，更多请关注php中文网其它相关文章！