效果图：

案例中的太阳 包括月亮动画 都是依靠关键帧动画以及定位进行实现 代码如下：
太阳：
html：

css：

 .box {
        position: relative;
        font-size: 1rem;
      }
      .sunny {
        position: absolute;
        top: 50%;
        left: 40%;
      }

      .box-1 {
        position: relative;
        width: 2.5em;
        height: 2.5em;
        margin: -1.25em;
        background: currentColor;
        border-radius: 50%;
        box-shadow: 0 0 0 0.375em orange;
        animation: spin 12s infinite linear;
      }
      .rays {
        position: absolute;
        top: -2em;
        left: 50%;
        display: block;
        width: 0.375em;
        height: 1.125em;
        margin-left: -0.1875em;
        background: yellow;
        border-radius: 0.25em;
        box-shadow: 0 5.375em yellow;
      }

      .rays:before,
      .rays:after {
        content: "";
        position: absolute;
        top: 0em;
        left: 0em;
        display: block;
        width: 0.375em;
        height: 1.125em;
        transform: rotate(60deg);
        transform-origin: 50% 3.25em;
        background: yellow;
        border-radius: 0.25em;
        box-shadow: 0 5.375em yellow;
      }
      .rays:before {
        transform: rotate(120deg);
      }
      @keyframes spin {
        100% {
          transform: rotate(360deg);
        }
      }

下雨：
html：

css：

    /* 下雨 */
      .rainy {
        position: absolute;
        top: 50%;
        left: 60%;
      }
      .cloud {
        position: absolute;
        z-index: 1;
        width: 3.6875em;
        height: 3.6875em;
        margin: -1.84375em;
        background: currentColor;
        border-radius: 50%;
        box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em lightgray, -2.1875em 0.6875em 0 -0.3125em lightgray,
          2.0625em 0.9375em 0 -0.5625em lightgray;
      }
      .cloud:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -0.5em;
        display: block;
        width: 4.5625em;
        height: 1em;
        background: currentColor;
        box-shadow: 0 0.4375em 0 -0.0625em lightgray;
      }
      .cloud:nth-child(2) {
        z-index: 0;
        background: #fff;
        box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff,
          2.0625em 0.9375em 0 -0.5625em #fff;
        opacity: 0.3;
        transform: scale(0.5) translate(6em, -3em);
        animation: cloud 4s linear infinite;
      }
      .cloud:nth-child(2):after {
        background: #fff;
      }
      .rain,
      .lightning,
      .snow {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 20%;
        width: 3.75em;
        height: 3.75em;
        margin: 0.375em 0 0 -2em;
        background: currentColor;
      }

      .rain:after {
        content: "";
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        width: 1.125em;
        height: 1.125em;
        margin: -1em 0 0 -0.25em;
        background: #0cf;
        border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
        box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2),
          -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
        transform: rotate(-28deg);
        animation: rain 3s linear infinite;
      }
      @keyframes cloud {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.3;
        }
        100% {
          opacity: 0;
          transform: scale(0.5) translate(-200%, -3em);
        }
      }
      @keyframes rain {
        0% {
          background: #0cf;
          box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
        }
        25% {
          box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
        }
        50% {
          background: rgba(255, 255, 255, 0.3);
          box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 rgba(255, 255, 255, 0.2);
        }
        100% {
          box-shadow: 0.625em 0.875em 0 -0.125em rgba(255, 255, 255, 0.2), -0.875em 1.125em 0 -0.125em rgba(255, 255, 255, 0.2), -1.375em -0.125em 0 #0cf;
        }
      }