cyb/src/containers/portal/components/MoonAnimation/styles.scss

.mask {
  position: fixed;
  top: 50%;
  transform: translate(50%, -50%);
  transition: 1s;
  border-radius: 50%;
  height: 400px;
  margin: 0px auto;
  overflow: hidden;
  max-width: 400px;
  width: 100%;
  box-shadow: -45px 0px 50px rgba(255, 255, 255, 0.09);

  &::after {
    border: 1px solid black;
    border-radius: 50%;
    content: '';
    height: 400px;
    left: -1px;
    position: absolute;
    top: -1px;
    max-width: 400px;
    width: 100%;
    z-index: 2;
  }
}

.mask__inner {
  animation: rotate-sphere 200s infinite linear;
  background-repeat: repeat-x;
  background-size: cover;
  border-radius: 50%;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
  height: 100%;
  position: relative;
  width: 100%;

  &::before {
    border-radius: 50%;
    background: linear-gradient(
      0deg,
      rgba(34, 193, 195, 0.3) 0%,
      rgba(253, 187, 45, 0.3) 100%
    );
    box-shadow: inset -100px 10px 100px 30px rgba(0, 0, 0, 1);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }

  &::after {
    border-radius: 50%;
    box-shadow: inset 3px 0 25px rgba(0, 0, 0, 0.8);
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }
}

@keyframes rotate-sphere {
  0% {
    background-position: 800px 0;
  }

  100% {
    background-position: 0 0;
  }
}

.mask__inner {
  background-image: url('../../../../image/moon.jpeg');
}