Heim > Artikel > Web-Frontend > Wie erstelle ich mit CSS einen Sternschnuppen-Animationseffekt?

Wie erstelle ich mit CSS einen Sternschnuppen-Animationseffekt?

WBOYnach vorne: 2023-09-05 09:33:221180Durchsuche

Meteore scheinen die funkelnden Zeichen der Wärme zu sein, die diese kleinen Schauer hervorrufen, wenn sie über den kalten Nachthimmel funkeln. Der Sternschnuppeneffekt ist einer der einzigartigsten Hintergrundeffekte für Websites mit dunklen Themen. Die Sternschnuppen-Animation ist ein großartiges Beispiel für einen Ladebildschirm, der Ihre Aufmerksamkeit lange fesseln kann, während der Rest des Materials auf der Website geladen wird. Dieser Effekt kann in Seitenladern und Benutzeroberflächen ausgenutzt werden.

In diesem Artikel besprechen wir Möglichkeiten, mit CSS einen Sternschnuppen-Animationseffekt zu erstellen. Hierzu verwenden wir verschiedene Eigenschaften von CSS wie Animation, Überlauf, Filter, Transformation, n-te untergeordnete Eigenschaft sowie :before- und :after-Pseudoselektoren.

Schritte, die Sie befolgen müssen

Hier sind die Schritte zum Erstellen eines Sternschnuppen-Animationseffekts -

Schritt 1 – Erstellen Sie das Grunddesign des Sterns mit HTML. Erstellen Sie ein Abschnittselement für den Himmel und neun

-Elemente für die Sterne.

Schritt 2 – Um den Stern im 45-Grad-Winkel fallen zu lassen, verwenden Sie die Transform-Eigenschaft des Section-Elements.

Schritt 3 – Richten Sie die p-Elemente entsprechend Ihren Anforderungen aus.

Schritt 4 – Erstellen Sie eine Donut-förmige Kugel unter Verwendung von Eigenschaften wie Positions- und Fülleigenschaften. Um ihnen eine kreisförmige Form zu geben, verwenden Sie die Eigenschaft border-radius.

Schritt 5 – Verwenden Sie die Pseudoselektoren :before und :after, um Vorher- und Nachher-Effekte für die Sterne festzulegen

Schritt 6 – Verwenden Sie die n-te Untereigenschaft, um dem Stern eine Animation hinzuzufügen. Gibt die Position jedes n-ten untergeordneten Elements an.

Schritt 7 – Geben Sie mithilfe von @keyframes die Breite des Kopfes und Schwanzes des Sterns an. Verwenden Sie @-webkit-Keyframes, um Aufnahmeeffekte zu erstellen.

Verwendete Attribute

Wir haben die folgenden CSS-Eigenschaften verwendet -

:n-te-Kind(n)-Selektor

:nth-child(n) ist ein CSS-Pseudoklassenselektor, der zum Zuordnen von Elementen basierend auf ihrer Position innerhalb einer Geschwistergruppe verwendet wird. Es stimmt mit allen Elementen des n-ten untergeordneten Elements überein. n kann eine Zahl, ein Schlüsselwort oder eine beliebige Formel sein.

Grammatik

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

Der Parameter „n“ in Klammern gibt das Muster der Auswahl oder Zuordnung von Elementen an. Es kann ein gerades oder ungerades Funktionszeichen sein.

Ungerade Werte stellen Elemente mit ungeraden Positionen in der Reihe dar, z. B. 1, 3, 5 usw. Ebenso stellen gerade Werte Elemente mit einer geraden Zahl in der Reihe dar, z. B. 2, 4, 6 usw.

CSS-Animation

Die Animationseigenschaft von CSS ermöglicht es uns, verschiedene Stileigenschaften eines Elements innerhalb eines bestimmten Zeitintervalls zu ändern und ihm so einen Animationseffekt zu verleihen.

@keyframes wird verwendet, um genau anzugeben, was in der Animation für eine bestimmte Dauer passiert. Dies geschieht durch die Deklaration von CSS-Eigenschaften für bestimmte „Frames“ während der Animation, wobei die Prozentsätze von 0 % (Anfang der Animation) bis 100 % (Ende der Animation) reichen.

Eigenschaften filtern

Es ermöglicht Entwicklern, visuelle Effekte wie Deckkraft, Unschärfe und Sättigung zu HTML-Elementen hinzuzufügen.

Grammatik

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

Hintergrund – Damit können wir visuelle Effekte zu HTML-Elementen im Hintergrund hinzufügen.

Box-Shadow – Damit können wir HTML-Elementen Schatten hinzufügen.

Transform – Mit dieser Eigenschaft können wir dem Element eine 2D- oder 3D-Transformation hinzufügen. Es ermöglicht Ihnen, Elemente zu transformieren, zu drehen, zu skalieren, zu verschieben, zu neigen usw.

Beispiel

<!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>

Fazit

In diesem Artikel haben wir gelernt, wie man mit CSS einen Sternschnuppeneffekt erstellt. Da sich das Webdesign erheblich verbessert hat, ist Online-Animation ein wichtiges Werkzeug, mit dem Website-Ersteller ein größeres Publikum ansprechen können. Die meisten Leute versuchen, es häufiger zu verwenden, nicht nur, um die Seite zu füllen, sondern um zu zeigen, wie die Seite gelesen werden sollte. Animationen werden verwendet, um Formularfehler anzuzeigen, Klickorte anzuzeigen, die Konversionsraten zu erhöhen und vieles mehr.

Animationen erregen oft die Aufmerksamkeit des Benutzers, deshalb werden sie verwendet. Darüber hinaus können Animationen verwendet werden, um die Aufmerksamkeit der Benutzer abzulenken, während Inhalte geladen werden, sodass der Eindruck entsteht, dass sie schneller geladen werden, und es ihnen ermöglicht wird, Bewegungen oder Fortschritte sofort zu beobachten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Sternschnuppen-Animationseffekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verstecke ich das Caretzeichen auf einer Webseite mithilfe von CSS?Nächster Artikel：Wie verstecke ich das Caretzeichen auf einer Webseite mithilfe von CSS?

In Verbindung stehende Artikel

Mehr sehen