首页 > 文章 > 前端

CSS实现旋转文字效果教程

时间：2025-12-04 19:40:47 343浏览收藏

推广推荐

支持 PC / 移动端，安全直达

想让你的网页文字动起来吗？本文将教你如何使用CSS动画实现炫酷的旋转文字效果！无需JavaScript，仅用CSS的`animation`和`transform: rotate()`属性，就能轻松打造流畅的文字旋转动画。本文将详细介绍如何创建HTML基础结构，并利用`@keyframes`定义旋转动画，实现从0度到360度的匀速循环旋转。同时，还会分享进阶技巧，例如制作文字摆动效果。此外，本文还提供了注意事项，包括`transform-origin`的设置、避免在大段文本中使用以及移动端性能优化建议，助你掌握CSS动画，为你的网站增添更多活力！

用CSS animation和transform: rotate()可实现文字旋转动画。先创建HTML元素
旋转的文字
，再通过@keyframes定义从0deg到360deg的旋转过程，设置animation属性为rotateText 3s linear infinite，使文字匀速无限循环旋转。可调整持续时间、缓动函数和旋转角度实现不同效果，如摆动动画swingText在0%到50%间旋转20deg再返回。建议设置display: inline-block确保变换生效，控制transform-origin调整旋转中心，避免用于大段文本，并注意移动端性能影响。

如何用css animation制作旋转文字特效

想让文字旋转起来，营造动感视觉效果？用 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;
}

说明：

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实现旋转文字效果教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSSanimation,transform-origin,@keyframes,transform:rotate(),旋转文字的内容请关注golang学习网公众号！

CSSanimation transform-origin @keyframes transform:rotate() 旋转文字