通过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;}
说明：
九歌
九歌–人工智能诗歌写作系统
322 查看详情 
2s：动画持续 2 秒ease-in-out：速度曲线，先慢后快再慢infinite：无限循环播放
3. 可选：hover 触发动画
如果只想在鼠标悬停时触发动画，可以结合 :hover 使用。
.icon:hover { animation: spinAndScale 1s ease-out forwards;}
这时动画只在 hover 时运行一次，forwards 表示动画结束后保持最终状态。
4. 实际使用示例（HTML + CSS）
以一个简单的 div 图标为例：
?.icon {font-size: 24px;cursor: pointer;animation: spinAndScale 2s linear infinite;}
@keyframes spinAndScale {0% {transform: rotate(0deg) scale(1);}100% {transform: rotate(360deg) scale(1.5);}}
你也可以把 transform-origin 设为中心点确保旋转围绕中心进行（默认已是 center，一般无需修改）。
基本上就这些。通过组合 rotate() 和 scale()，配合灵活的 timing function 与循环设置，就能做出流畅的图标动效。
以上就是如何通过css animation实现图标旋转与缩放效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032107.html
微信扫一扫 
支付宝扫一扫 
