Change Body Color on a CSS Style as Div-CodePudding

I'm new to HTML and CSS (student) and I'm running into an issue here.

I want to change the body background color when clicking on an element having a CSS Animation. Is it possible? Thanks!

I tried to set the Rocket as a Button, But it only changed the Rockets Color. I want to make it Change the background color for the Body.

body {
  background: radial-gradient(circle at bottom, navy 0, black 100%);
  height: 100vh;
  overflow: hidden;
}

.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;
}

.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: relative;
  height: 10px;
  width: 10px;
  background-color: #151845;
  border: 2px solid #b8d2ec;
  border-radius: 50%;
  top: 15px;
  left: 5px;
}

<div >
  <button ></button>
  <div ></div>
</div>

CodePudding user response：

To do this, you need to know JavaScript. Take this sample code and try to do more yourself.

const rocket = document.getElementById("rocket")

rocket.addEventListener('click', (e) => {
  const randomColor = Math.floor(Math.random()*16777215).toString(16);
  document.body.style = `background: radial-gradient(circle at bottom, #${randomColor} 0, black 100%);`
})

body {
  background: radial-gradient(circle at bottom, navy 0, black 100%);
  height: 100vh;
  overflow: hidden;
}

.orbit {
  height: 450px;
  width: 650px;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  left: 500px;
  bottom: 300px;
  animation: spin 10s 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;
  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: relative;
  height: 10px;
  width: 10px;
  background-color: #151845;
  border: 2px solid #b8d2ec;
  border-radius: 50%;
  top: 15px;
  left: 5px;
}

<div >
  <button id="rocket" ></button>
  <div ></div>
</div>