如何用css实现图标旋转与缩放动画

实现图标旋转与缩放动画需使用CSS的transform和animation属性。1. 创建图标元素，如div模拟图标；2. 用@keyframes定义spinAndScale动画，控制rotate和scale变化：0%为rotate(0deg) scale(1)，50%为rotate(180deg) scale(1.5)，100%为rotate(360deg) scale(1)；3. 将animation应用到.icon类，设置animation: spinAndScale 2s infinite ease-in-out，配合宽高、背景等样式；4. 可选:hover交互，用transition实现悬停时的transform变化。根据需求选择持续动画或交互触发，确保元素有固定尺寸以提升动画稳定性。

要实现图标的旋转与缩放动画，核心是使用 CSS 的 transform 和 animation 属性。通过定义关键帧和过渡效果，可以让图标平滑地旋转和放大缩小。

1. 基础结构：准备图标元素

通常使用字体图标（如 Font Awesome）或 SVG 图标。这里以一个简单的 div 模拟图标为例：

2. 定义旋转与缩放动画

使用 @keyframes 创建动画规则，控制 transform 的 rotate 和 scale 值：

3. 应用动画到图标

将动画绑定到图标元素，设置持续时间、循环方式等：

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

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

65

查看详情

说明：
- 2s 表示动画周期为2秒
- infinite 让动画无限循环
- ease-in-out 使动画开始和结束更柔和

4. 可选：悬停触发动画

如果只想在鼠标悬停时动画，可以配合 :hover 使用 transition：

这种方式更适合交互式响应，不需要持续动画。

基本上就这些。用 keyframes 实现连续动画，用 hover + transition 实现交互反馈，根据场景选择合适方式。注意加上浏览器前缀（如有需要）并确保图标容器有明确尺寸，动画效果会更稳定。

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