如何使用CSS創造流星動畫效果？-css教學-PHP中文網

如何使用CSS創造流星動畫效果？

WBOY

發布： 2023-09-05 09:33:22

轉載

1260 人瀏覽過

如何使用CSS創造流星動畫效果？

流星似乎是這些小顫抖在寒冷的夜空中閃爍時產生的溫暖的閃爍跡象。流星效果是黑暗主題網站最獨特的背景效果之一。流星動畫是一個加載畫面的絕佳範例，它可以在加載網站上的其餘材料時長時間吸引您的注意力。這種效果可以在頁面載入器和使用者介面中利用。

在這篇文章中，我們將討論使用CSS創造流星動畫效果的方法。為此，我們將使用 CSS 的各種屬性，如動畫、溢位、篩選器、變換、第 n 個子屬性、:before 和 :after 偽選擇器。

應遵循的步驟

以下是創造流星動畫效果的步驟 -

第 1 步 - 使用 HTML 建立星星的基本設計。為天空創建一個部分元素，為星星創建九個

元素。

第 2 步 - 若要讓星星以 45 度方向掉落，請使用剖面元素的變換屬性。

第 3 步 - 根據您的要求對齊 p 元素。

第 4 步 - 使用位置和填滿屬性等屬性製作環形球。若要賦予它們圓形形狀，請使用邊框半徑屬性。

步驟5 - 使用:before 和:after 偽選擇器，為星星指定前後效果

第 6 步 - 使用第 n 個子屬性，為星星新增動畫效果。指定每個第 n 個子級的位置。

第 7 步 - 使用@keyframes，指定星星頭部和尾部的寬度。使用@-webkit-keyframes，創造拍攝效果。

使用的屬性

我們使用了以下 CSS 屬性 -

:nth-child(n) 選擇器

:nth-child(n) 是一個 CSS 偽類別選擇器，用於根據元素在同級群組中的位置來匹配元素。它匹配第 n 個子元素的所有元素。 n 可以是數字、關鍵字或任何公式。

文法

element :nth-child(n){
   Css declarations;
}

登入後複製

括號中的參數「n」表示選擇或符合元素的模式。它可能是偶數或奇數函數符號。

奇數值表示在系列中位置為奇數的項目，例如 1、3、5 等。同樣，偶數值表示在系列中位置為偶數的項目，例如 2、4、6 等。

CSS 動畫

CSS 的動畫屬性允許我們在一定的時間間隔內更改元素的各種樣式屬性，從而賦予其動畫效果。

@keyframes 用於準確指定在給定持續時間內動畫中發生的情況。這是透過在動畫期間聲明某些特定「影格」的 CSS 屬性來完成的，百分比從 0%（動畫開始）到 100%（動畫結束）。

過濾屬性

它使開發人員能夠為 HTML 元素添加不透明度、模糊和飽和度等視覺效果。

文法

filter: none | blur()| drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | brightness()| contrast();

登入後複製

背景 - 它使我們能夠在背景中為 HTML 元素添加視覺效果。

Box-shadow - 它使我們能夠為 HTML 元素添加陰影。

Transform - 此屬性使我們能夠為元素新增 2D 或 3D 變換。它允許您對元素進行變換、旋轉、縮放、移動、傾斜等。

範例

<!DOCTYPE html>
<html>
<head>
   <title> Shooting Star Animation Effect </title>
   <style>
      *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      body{
         overflow: hidden;
      }
      div{
         position: absolute;
         top: 0;
         left: 0;
         background: #000;
         background-position-x: center;
         background-size: cover;
         width: 100%;
         height: 100vh;
         animation: background 68s linear infinite;
      }
      @keyframes background {
         0%{ transform:scale(1);}
         55%{ transform:scale(1.3);}
         100%{ transform: scale(1);}
      }
      span{
         position: absolute;
         left: 50%;
         top: 45%;
         width: 5px;
         height: 5px;
         background: white;
         border-radius: 50%;
         box-shadow: 0 1px 0 5px rgba(254, 254, 255, 0.2), 0 1px 0 7px rgba(245, 254, 255, 0.1), 0 1px 21px rgba(253, 253, 245, 1) ;
         animation: anim 3s ease-in-out infinite;
      }
      span::before{
         content: '';
         width: 290px;
         height: 2px;
         position: absolute;
         top: 53%;
         transform: translateY(-45%);
         background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
      }
      @keyframes anim {
         0%{ transform: rotate(325deg) translateX(0); opacity: 1; }
         40%{ opacity: 0.8; }
         70%{ opacity: 1; }
         100%{ transform: rotate(325deg) translateX(-1400px); opacity: 0; }
      }
      span:nth-child(1){
         top: 0;
         right: 0;
         left: inherit;
         animation-delay: 0 ;
         animation-duration: 1s;
      }
      span:nth-child(2){
         top: 0;
         right: 70px;
         left: inherit;
         animation-delay: 0.3s;
         animation-duration: 4s;
      }
      span:nth-child(3){
         top: 70px;
         right: 0px;
         left: inherit;
         animation-delay: 0.3s ;
         animation-duration: 3s;
      }
      span:nth-child(4){
         top: 0;
         right: 170px;
         left: initial;
         animation-delay: 0.7s;
         animation-duration: 3s;
      }
   </style>
</head>
<body>
   <div>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
   </div>
</body>
</html>

登入後複製