如何实现按钮旋转动画且内部文本保持静止？

原问题场景 #

我给按钮添加了持续旋转的动画：

@keyframes rotateinf {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

但按钮的子文本也会跟着旋转，我临时用绝对定位的<span>把文本放在按钮上方来规避问题，HTML和CSS代码如下：

HTML代码

<span class="imptxt" style="position: absolute;z-index: 10; color: black; top:40%; right:44%; pointer-events: none;">
  All about
</span>
<span class="imptxt" style="position: absolute;z-index: 10; color: black; top:48%; right:48%; pointer-events: none;">
  me
</span>
<button id="trns" class="buttonrot" onmousedown="redirect()"></button>

buttonrot类CSS代码

.buttonrot {
  padding: 200px;
  border-radius: 50px;
  z-index: 9;
  animation: fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;
}

实际效果：

现在需要更规范、更优的实现方式，避免用绝对定位的额外元素。

最优解决方案：用伪元素承载旋转动画 #

这种方法不需要额外的HTML元素，结构更简洁，逻辑更清晰：

1. 重构HTML结构

直接把文本放在按钮内部，不需要额外的<span>：

<button id="trns" class="buttonrot" onmousedown="redirect()">
  <span class="imptxt">All about<br>me</span>
</button>

2. 修改CSS代码

给按钮添加伪元素::before，让伪元素作为旋转的背景，按钮本身不添加旋转动画，文本自然保持静止：

@keyframes rotateinf {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.buttonrot {
  padding: 200px;
  border-radius: 50px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  background: transparent; /* 按钮本身透明，让伪元素显示 */
  border: none; /* 若原按钮有边框，可根据需求调整 */
}

/* 伪元素作为旋转的背景容器 */
.buttonrot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* 这里设置按钮原本的背景样式，比如颜色、渐变等 */
  background: #your-button-color;
  z-index: -1; /* 伪元素在文本下方 */
  animation: fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s;
  transform-origin: center;
}

.imptxt {
  position: relative;
  z-index: 1; /* 文本在伪元素上方 */
  color: black;
  text-align: center; /* 让文本居中显示 */
}

备选方案：反向旋转文本抵消动画 #

如果必须让按钮本身旋转，可以给文本元素添加反向的旋转动画，抵消按钮的旋转效果：

1. HTML结构

<button id="trns" class="buttonrot" onmousedown="redirect()">
  <span class="imptxt">All about<br>me</span>
</button>

2. CSS代码

@keyframes rotateinf {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes reverseRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.buttonrot {
  padding: 200px;
  border-radius: 50px;
  z-index: 9;
  animation: fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;
}

.imptxt {
  position: relative;
  z-index: 1;
  color: black;
  text-align: center;
  /* 添加反向旋转动画，时长和按钮完全一致 */
  animation: reverseRotate 10s linear infinite 1s;
  transform-origin: center;
}

方案对比 #

• 伪元素方案：更推荐，HTML结构简洁，不需要额外的反向动画，性能更优，逻辑更清晰，便于维护。
• 反向旋转方案：适合必须让按钮本身旋转的场景，但需要保证动画时长、缓动函数完全一致，否则会出现文本偏移。

内容的提问来源于stack exchange，提问作者Hardway Studios