请求协助：实现圆形与文本水平旋转及按键触发滚动效果

HTML 结构 #

先搭建基础页面结构，包含圆形元素和需要旋转的文本：

<div class="wrapper">
  <div class="circle"></div>
  <p class="rotating-text">滚动文本示例</p>
</div>

CSS 样式 #

通过CSS实现文本的持续水平旋转动画，以及圆形元素的滚动动画（默认静止，按键触发）：

/* 基础布局：居中对齐元素 */
.wrapper {
  position: relative;
  width: 80%;
  margin: 50px auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 圆形元素样式 */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #2563eb;
}

/* 文本的水平旋转动画：绕Y轴3D旋转 */
.rotating-text {
  font-size: 20px;
  font-weight: 500;
  animation: horizontalRotate 3s linear infinite;
}

@keyframes horizontalRotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* 圆形的水平滚动动画：移动+自身旋转模拟滚动 */
@keyframes rollHorizontal {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(80vw) rotate(360deg);
  }
}

/* 触发滚动的状态类 */
.circle.rolling {
  animation: rollHorizontal 5s linear infinite;
}

JavaScript 逻辑 #

监听全局按键事件，按下任意键时给圆形添加滚动类，触发动画：

document.addEventListener('keydown', () => {
  const circle = document.querySelector('.circle');
  if (!circle.classList.contains('rolling')) {
    circle.classList.add('rolling');
  }
});

自定义调整说明 #

• 修改文本旋转速度：调整horizontalRotate动画的时长（比如把3s改成5s）
• 改变圆形滚动的距离或速度：修改rollHorizontal里的translateX值和动画时长
• 自定义圆形样式：修改border-radius、background-color等属性

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