body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #34495e;
}

main {
  width: 400px;
  height: 400px;
  background: #ecf0f1;
  border-radius: 50%;
  position: relative;
}

main::before {
  content: '';
  width: 20px;
  height: 20px;
  background: #333;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

main::after {
  content: '';
  width: 5px;
  height: 50%;
  background: #333;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  transform-origin: bottom;
  transition-duration: 60s;
  transition-timing-function: steps(60, end);
}

body:hover main::after {
  transform: translateX(-50%)           rotate(360deg);
}