Wie erstelle ich mit CSS einen Sternschnuppen-Animationseffekt?
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1390
52
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten?
Apr 02, 2025 pm 06:17 PM
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass
Apr 03, 2025 am 10:30 AM
Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.
Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor
Apr 02, 2025 am 04:27 AM
Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?
Vergleich von Browsern für reaktionsschnelles Design
Apr 02, 2025 pm 06:25 PM
Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben
Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet?
Apr 05, 2025 pm 05:51 PM
Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...
