Moon & Stars | Learning Axis

HTML

CSS

body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: black;
      overflow: hidden;
    }
    .sky {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .moon {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 120px;
      background: radial-gradient(circle at 40% 40%, #fff 60%, #f5f5f5 90%);
      border-radius: 50%;
      animation: moveMoon 10s infinite linear;
    }
    .moon:after {
      content: "";
      position: absolute;
      top: 0;
      left: 25px;
      width: 100px;
      height: 100px;
      background: #000814;
      border-radius: 50%;
    }
    .star {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 50%;
      opacity: 0;
      animation: twinkle 3s infinite ease-in-out;
    }
    .star:nth-child(1) {
      top: 10%;
      left: 30%;
      animation-delay: 0.5s;
    }
    .star:nth-child(2) {
      top: 25%;
      left: 70%;
      animation-delay: 1s;
    }
    .star:nth-child(3) {
      top: 50%;
      left: 20%;
      animation-delay: 1.5s;
    }
    .star:nth-child(4) {
      top: 70%;
      left: 80%;
      animation-delay: 2s;
    }
    .star:nth-child(5) {
      top: 85%;
      left: 40%;
      animation-delay: 2.5s;
    }
    @keyframes moveMoon {
      0% {
        transform: translateX(-50%) translateY(0);
      }
      50% {
        transform: translateX(-50%) translateY(-30px);
      }
      100% {
        transform: translateX(-50%) translateY(0);
      }
    }
    @keyframes twinkle {
      0%, 100% {
        opacity: 0;
        transform: scale(0.8);
      }
      50% {
        opacity: 1;
        transform: scale(1.2);
      }
    }