純CSS實現「流星趕月」，祝大家中秋節快樂

明天就是中秋節了，就想著用CSS畫一個月亮送給園友們吧。但是就畫一個月亮也太簡單了些，於是便加了一些星星點綴以及流星墜落的效果。這篇文章就用純CSS為大家實現一個「流星趕月」的效果。

實現效果

點擊運行查看

畫個月亮

首先我們先讓全螢幕背景變成黑色，然後實現一個大月亮🌕，並加點"漸變"，「光暈"等效果

  • html
  <body>
    <div class="wrap">
      <div class="moon"></div>
    </div>
  </body>
  • css

      .wrap {
        background: #000000;
        width: 100vw;
        height: 100vh;
        position: relative;
      }
      .moon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-image: linear-gradient(40deg, #f9fabe, #fffd3b);
        position: absolute;
        top: 10%;
        right: 20%;
        box-shadow: 0 0 30px 0px #fffd3b, 0 0 80px 0 #ffffff;
      }

此時大月亮就出來了

image.png

然後給月亮加點」漸明漸暗「的動畫效果,使用filter屬性中的brightness就可以實現

      @keyframes moonflashing {
        0% {
          filter: brightness(0.8);
        }
        50% {
          filter: brightness(1.3);
        }
        100% {
          filter: brightness(0.8);
        }
      }

星星點綴

天空中只有月亮沒有星星怎麼能行,我們在天空中加幾個星星

  • html
      <div class="star star1"></div>
      <div class="star star2"></div>
      <div class="star star3"></div>
      <div class="star star4"></div>
      <div class="star star5"></div>
      <div class="star star6"></div>
      <div class="star star7"></div>
  • css
      .star {
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background: #ffffff;
        position: absolute;
        animation: starflashing 2s infinite;
      }
      .star1 {
        top: 50%;
        right: 20%;
      }
      .star2 {
        top: 70%;
        right: 30%;
      }
      .star3 {
        top: 40%;
        left: 20%;
      }
      .star4 {
        top: 60%;
        right: 10%;
      }
      .star5 {
        top: 55%;
        right: 44%;
      }
      .star6 {
        top: 10%;
        left: 30%;
      }
      .star7 {
        top: 15%;
        left: 20%;
      }

然後再為星星加上「一閃一閃」的動畫✨✨✨

      @keyframes starflashing {
        0% {
          filter: brightness(0.3);
        }
        50% {
          filter: brightness(1);
        }
        100% {
          filter: brightness(0.3);
        }
      }

此時天空中便有了一閃一閃亮晶晶的星星啦😊

image.png

流星划過

接下來便是」流星「的實現了，我們先畫一個靜態的流星，流星包括它的頭+尾巴。我們可以先畫個流星頭

  • html
 <div class="meteor"></div>
  • css
     .meteor {
        position: absolute;
        width: 4px;
        height: 4px;
        top: 30%;
        left: 30%;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 5px 5px #636262;
      }

流星頭實現很簡單，就是一個圓加box-shadow陰影效果

image.png

然後再畫它的尾巴。我們可以用它的偽元素實現

      .meteor:after {
        content: "";
        display: block;
        border: 0px solid #fff;
        border-width: 2px 100px;
        border-color: transparent transparent transparent
          rgba(255, 255, 255, 0.3);
      }

注意這裡的色值要用rgba形式，因為需要它的透明效果

image.png

再將其旋轉45度,使用translate3d進行平移調整對齊

 transform: rotate(-45deg) translate3d(1px, 1px, 0);
 transform-origin: 0% 0%;

image.png

接下來我們要做的就是讓流星墜落下去，我們可以先定義一個動畫

      .meteor {
        position: absolute;
        width: 4px;
        height: 4px;
        top: 30%;
        left: 30%;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 5px 5px #636262;
        animation: meteorflashing 3s infinite linear 1s;
      }
    @keyframes meteorflashing {
        0% {
          opacity: 0;
          transform: scale(0) translate3d(0, 0, 0);
        }
        50% {
          opacity: 1;
          transform: scale(1) translate3d(-200px, 200px, 0);
        }
        100% {
          opacity: 0;
          transform: scale(1) translate3d(-500px, 500px, 0);
        }
      }

這時候便實現了流星墜落的效果（閉上眼睛想像一下它是動的🤣）

image.png

最後我們多加一點流星並給它們不同的延遲時間與動畫時間

  • html
      <div class="meteor meteor1"></div>
      <div class="meteor meteor2"></div>
      <div class="meteor meteor3"></div>
      <div class="meteor meteor4"></div>
      <div class="meteor meteor5"></div>
  • css
      .meteor {
        position: absolute;
        width: 4px;
        height: 4px;
        opacity: 0;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 5px 5px #636262;
      }
      .meteor:after {
        content: "";
        display: block;
        border: 0px solid #fff;
        border-width: 2px 100px 2px 100px;
        border-color: transparent transparent transparent
          rgba(255, 255, 255, 0.3);
        transform: rotate(-45deg) translate3d(1px, 1px, 0);
        transform-origin: 0% 0%;
      }
      .meteor1 {
        top: 2vh;
        left: 30vw;
        animation: meteorflashing 2s infinite linear 1s;
      }
      .meteor2 {
        top: 22vh;
        left: 80vw;
        background: rgb(234, 0, 255);
        animation: meteorflashing 2s infinite linear 1s;
      }
      .meteor3 {
        top: 30vh;
        left: 40vw;
        animation: meteorflashing 3s infinite linear 2s;
      }
      .meteor4 {
        top: 10vh;
        left: 50vw;
        animation: meteorflashing 3s infinite linear 1s;
      }
      .meteor5 {
        top: 50vh;
        right: 2vw;
        animation: meteorflashing 3s infinite linear 3s;
      }
      @keyframes meteorflashing {
        0% {
          opacity: 0;
          transform: scale(0) translate3d(0, 0, 0);
        }
        50% {
          opacity: 1;
          transform: scale(1) translate3d(-200px, 200px, 0);
        }
        100% {
          opacity: 0;
          transform: scale(1) translate3d(-500px, 500px, 0);
        }
      }

image.png

好啦,此時便實現了我們所需要的效果啦🎉🎉🎉

中秋節快樂

最後中秋節快到了，我在這裡提前祝大家節日快樂，闔家團圓。沒什麼可送你們的，我就把這輪明月🌕當作節日禮物送給大家了

Tags:

VirMach 便宜 VPS