点击带CSS动画的元素时如何修改body背景颜色？

当然可行！问题出在你还没有添加JavaScript事件监听来关联点击动作和body背景色的修改——之前你把火箭设为button，但只给它加了样式，没有编写点击后的逻辑。下面一步步帮你搞定：

第一步：修正HTML结构（可选但重要） #

你的.window元素现在在.orbit外面，这样它不会跟着火箭一起旋转，应该把它放到.rocket里面，这样窗口才是火箭的一部分：

<div class="orbit">
  <button class="rocket">
    <div class="window"></div>
  </button>
</div>

第二步：添加点击事件逻辑 #

这里有两种常用方式实现背景色修改，推荐第二种，因为支持平滑过渡动画：

方式1：直接修改行内样式 #

在HTML末尾添加script标签，编写点击逻辑：

const rocketBtn = document.querySelector('.rocket');
rocketBtn.addEventListener('click', () => {
  // 替换成你想要的背景样式，比如固定渐变色
  document.body.style.background = 'radial-gradient(circle at bottom, darkgreen 0, black 100%)';
});

方式2：CSS类切换（推荐，带过渡动画） #

这种方式更灵活，还能让背景色变化更丝滑：

1. 先给body加过渡动画，再定义点击后的背景类：

body {
  background: radial-gradient(circle at bottom, navy 0, black 100%);
  height: 100vh;
  overflow: hidden;
  /* 添加过渡效果，让背景变化更平滑 */
  transition: background 0.5s ease;
}

/* 点击后切换的背景样式 */
body.bg-changed {
  background: radial-gradient(circle at bottom, darkgreen 0, black 100%);
}

2. 然后用JavaScript切换这个类：

const rocketBtn = document.querySelector('.rocket');
rocketBtn.addEventListener('click', () => {
  document.body.classList.toggle('bg-changed');
});

这样每次点击火箭，body背景会在原样式和新样式之间来回切换。

完整代码示例 #

整合后的完整代码，包含结构修正、样式优化和点击逻辑：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: radial-gradient(circle at bottom, navy 0, black 100%);
      height: 100vh;
      overflow: hidden;
      transition: background 0.5s ease;
    }

    .orbit {
      height: 450px;
      width: 650px;
      border-radius: 50%;
      position: absolute;
      margin: auto;
      left: 500px;
      bottom: 300px;
      animation: spin 5s infinite linear;
    }

    @keyframes spin {
      100% {
        transform: rotate(360deg)
      }
    }

    .rocket {
      background-color: #fafcf7;
      height: 50px;
      width: 25px;
      border-radius: 50% 50% 0 0;
      position: relative;
      left: 11px;
      top: 115px;
      /* 去掉button默认边框，优化交互 */
      border: none;
      cursor: pointer;
    }

    .rocket:before {
      position: absolute;
      content: "";
      background-color: #39beff;
      height: 20px;
      width: 55px;
      z-index: -1;
      border-radius: 50% 50% 0 0;
      right: -15px;
      bottom: 0;
    }

    .rocket:after {
      position: absolute;
      content: "";
      background-color: #39beff;
      height: 4px;
      width: 15px;
      border-radius: 0 0 2px 2px;
      bottom: -4px;
      left: 4.3px;
    }

    .window {
      position: absolute;
      height: 10px;
      width: 10px;
      background-color: #151845;
      border: 2px solid #b8d2ec;
      border-radius: 50%;
      top: 15px;
      left: 5px;
    }

    body.bg-changed {
      background: radial-gradient(circle at bottom, darkgreen 0, black 100%);
    }
  </style>
</head>
<body>
  <div class="orbit">
    <button class="rocket">
      <div class="window"></div>
    </button>
  </div>

  <script>
    const rocketBtn = document.querySelector('.rocket');
    rocketBtn.addEventListener('click', () => {
      document.body.classList.toggle('bg-changed');
    });
  </script>
</body>
</html>

额外小技巧 #

如果想要每次点击切换随机背景色，可以试试这段代码：

function getRandomGradient() {
  const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffcc5c'];
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  return `radial-gradient(circle at bottom, ${randomColor} 0, black 100%)`;
}

rocketBtn.addEventListener('click', () => {
  document.body.style.background = getRandomGradient();
});

这样每次点击火箭，背景都会变成随机的渐变色哦！

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