style.css

* {
  box-sizing: border-box;
}

body {
  margin: 10px;
}

.field {
  width: 1000px;
  height: 700px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.field:before {
  content: "";
  position: absolute;
  top: -55%;
  left: -25%;
  width: 1500px;
  height: 1500px;
  z-index: -1;
  background: url(img/space3.jpg) center;
  background-size: cover;
  animation: spin-back 700s linear 0s infinite;
}

.excel {
  width: 50px;
  height: 50px;
  padding: 5px;
}

.snakeBody {
  background: url(img/earth3.png) center no-repeat;
  background-size: 80%;
  border-radius: 40%;
  animation: spin-back 0.9s linear 0s infinite;
}

.head {
  background: url(img/klaksa2.png);
  background-size: cover;
  border-radius: 10%;
  animation: spin 5s linear 0s infinite;
}

.mouse {
  background: url(img/earth.png);
  background-size: cover;
  animation: spin 20s linear 0s infinite;
}

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

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