用CSS animation和transform: rotate()可实现文字旋转动画。先创建HTML元素
旋转的文字，再通过@keyframes定义从0deg到360deg的旋转过程，设置animation属性为rotateText 3s linear infinite，使文字匀速无限循环旋转。可调整持续时间、缓动函数和旋转角度实现不同效果，如摆动动画swingText在0%到50%间旋转20deg再返回。建议设置display: inline-block确保变换生效，控制transform-origin调整旋转中心，避免用于大段文本，并注意移动端性能影响。
想让文字旋转起来，营造动感视觉效果？用 CSS animation 配合 transform: rotate() 就能轻松实现。不需要 JavaScript，只需几行代码就能做出流畅的旋转文字动画。
基础结构：HTML 准备
先写一个简单的 HTML 元素来承载文字：
关键样式：定义旋转动画
使用 @keyframes 定义旋转过程，再通过 animation 属性应用到元素上。
@keyframes rotateText {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating-text {
font-size: 2rem;
font-weight: bold;
color: #007bff;
display: inline-block;
animation: rotateText 3s linear infinite;
}
说明：
立即学习“前端免费学习笔记（深入）”；
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情 
rotate(0deg) 到 rotate(360deg)：从初始角度转一圈回到原位 3s：动画持续时间，可调快或慢 linear：匀速旋转，也可用 ease-in-out 等缓动效果 infinite：无限循环播放 display: inline-block：确保 transform 正常生效
进阶效果：摆动或分段旋转
如果不想转一整圈，可以做来回摆动效果：
@keyframes swingText {
0% { transform: rotate(0deg); }
50% { transform: rotate(20deg); }
100% { transform: rotate(0deg); }
}
.rotating-text {
animation: swingText 2s ease-in-out infinite;
}
这种适合提示类文字，看起来更活泼。
注意事项
为了让动画更稳定，建议：
给元素设置 transform-origin 控制旋转中心，默认是中心点，可改为 left、top 等 避免在大段文本上使用，影响阅读 移动端注意性能，过多动画可能卡顿基本上就这些。不复杂但容易忽略细节。掌握 keyframes 和 transform 的配合，就能灵活控制文字动效。
以上就是如何用css animation制作旋转文字特效的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1015096.html
微信扫一扫 
支付宝扫一扫 
