CSS图标旋转缩放动画技巧分享

前往漫画官网入口并下载

大家好，今天本人给大家带来文章《CSS动画实现图标旋转缩放技巧》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

通过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 的 @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;
}

说明：

• 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);
}
}</p>

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

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。