Inhaltsverzeichnis
Basisspinner mit Grenzen
Benutzerdefinierte Spinner mit mehreren Punkten
Hinzufügen von Animation zu Schaltflächen
Tipps zur Anpassung
Heim Web-Frontend CSS-Tutorial CSS -Tutorial zum Erstellen von Ladespinner und Animationen

CSS -Tutorial zum Erstellen von Ladespinner und Animationen

Jul 07, 2025 am 12:07 AM
css

Es gibt drei Möglichkeiten, einen CSS -Laderotator zu erstellen: 1. Verwenden Sie den Basisrotator der Grenzen, um einfache Animationen über HTML und CSS zu erreichen. 2. Verwenden Sie einen benutzerdefinierten Rotator mit mehreren Punkten, um den Sprungeffekt durch verschiedene Verzögerungszeiten zu erreichen. 3. Fügen Sie einen Rotator in die Taste hinzu und wechseln Sie den Klassen über JavaScript, um den Ladestatus anzuzeigen. Jeder Ansatz betont die Bedeutung von Entwurfsdetails wie Farbe, Größe, Zugänglichkeit und Leistungsoptimierung, um die Benutzererfahrung zu verbessern.

CSS -Tutorial zum Erstellen von Ladespinner und Animationen

Das Erstellen von Ladespinnern mit CSS ist eine einfache Möglichkeit, die Benutzererfahrung während des Lastens von Inhalten zu verbessern. Sie brauchen kein JavaScript für einfache Animationen - nur HTML und CSS. Im Folgenden finden Sie praktische Methoden, um grundlegende und maßgeschneiderte Spinner zu erstellen.

CSS -Tutorial zum Erstellen von Ladespinner und Animationen

Basisspinner mit Grenzen

Eine der einfachsten Möglichkeiten, einen Spinner zu erstellen, besteht darin, ein umrandetes Element zu verwenden und ihn mit CSS -Animation zu drehen.

CSS -Tutorial zum Erstellen von Ladespinner und Animationen

HTML:

 <div class = "spinner"> </div>

CSS:

CSS -Tutorial zum Erstellen von Ladespinner und Animationen
 .spinner {
  Breite: 40px;
  Höhe: 40px;
  Grenze: 4px Solid #CCC;
  Border-Top-Color: #333;
  Grenzradius: 50%;
  Animation: Spin 1s linear unendlich;
}

@keyframes spin {
  zu {transformieren: rotieren (360de); }
}
  • Der border erzeugt die Ringform.
  • border-top-color gibt den "Belastungs" -Effekt mit einer kontrastierenden Farbe.
  • Der spin -Keyframe dreht das Element unendlich.

Diese Methode funktioniert gut für kleine, subtile Lader.


Benutzerdefinierte Spinner mit mehreren Punkten

Wenn Sie etwas visuelleres als einen rotierenden Kreis wünschen, sollten Sie mehrere Punkte animieren, die nacheinander erscheinen.

HTML:

 <div class = "dot-spinner">
  <div class = "dot"> </div>
  <div class = "dot"> </div>
  <div class = "dot"> </div>
</div>

CSS:

 .Dot-Spinner {
  Anzeige: Flex;
  Lücke: 5px;
}

.dot {
  Breite: 8px;
  Höhe: 8px;
  Hintergrundfarbe: #333;
  Grenzradius: 50%;
  Animation: Bounce 1.2s Infinite Leichterung;
}

.DOT: N-te-Kind (1) {Animation-Delay: -0.32s; }
.DOT: N-te-Kind (2) {Animation-Delay: -0.16s; }

@keyframes sprung {
  0%, 80%, 100%{Transformation: Skala (0); }
  40% {Transformation: Skala (1); }
}
  • Jeder Punkt skaliert zu etwas anderen Zeiten ein- und aus.
  • Diese gestaffelte Animation verleiht einen pulsierenden oder springenden Effekt.
  • Sie können die Anzahl der Punkte ändern oder das Timing für verschiedene Stile einstellen.

Diese Art von Spinner eignet sich hervorragend für moderne Benutzeroberflächen, wo subtile Bewegung Persönlichkeit verleiht.


Hinzufügen von Animation zu Schaltflächen

Manchmal möchten Sie einen Spinner in einer Taste anzeigen, wenn eine Aktion verarbeitet wird.

HTML:

 <button class = "laden-btn">
  <span class = "btn-text"> surven </span>
  <span class = "Spinner"> </span>
</button>

CSS (teilweise):

 .loading-btn .spinner {
  Anzeige: Keine;
  Breite: 16px;
  Höhe: 16px;
  Grenze: 2PX Solid #FFF;
  Grenztop-Farben: transparent;
  Grenzradius: 50%;
  Animation: Spin 0,8s linear unendlich;
  Rand-Links: 8px;
}

.loading-btn.loading .spinner {
  Anzeige: Inline-Block;
}

.loading-btn.loading .BTN-Text {
  Deckkraft: 0;
}
  • Wenn die Schaltfläche eine loading hat, erscheint der Spinner und der Text verblasst aus.
  • Sie würden die Klasse mit JavaScript umschalten, wenn Sie eine asynchronisierte Aktion auslösen.

Dieser Ansatz hält Ihre Schnittstelle reaktionsschnell und gibt Feedback während Aktionen wie der Einreichung von Formular.


Tipps zur Anpassung

Hier sind einige schnelle Tipps, damit Ihre Spinner besser funktionieren:

  • Verwenden Sie semantische Farben : Passen Sie die Spinnerfarbe an Ihr Thema oder Ihre Marke an.
  • Halten Sie es klein : Spinner sollten den Bildschirm nicht dominieren, wenn es nicht erforderlich ist.
  • Betrachten Sie die Barrierefreiheit : Fügen Sie bei Bedarf Aria-Attribute hinzu ( aria-busy , role="status" ).
  • Leistung optimieren : Vermeiden Sie überkomprizierte Animationen, die das Rendern verlangsamen können.

Sie können diese Techniken mischen oder je nach den Anforderungen Ihres Projekts durchführen.


Im Grunde genommen erstellen und anpassen Sie Spinner mit nur CSS. Es ist nicht kompliziert, aber die Details richtig zu machen, macht einen Unterschied darin, wie reibungslos und professionell Ihre Benutzeroberfläche sich anfühlt.

Das obige ist der detaillierte Inhalt vonCSS -Tutorial zum Erstellen von Ladespinner und Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie PHP, um eine Q & A -Community -Plattform zu entwickeln, detaillierte Erläuterung des interaktiven Monetisierungsmodells mit PHP -Community So verwenden Sie PHP, um eine Q & A -Community -Plattform zu entwickeln, detaillierte Erläuterung des interaktiven Monetisierungsmodells mit PHP -Community Jul 23, 2025 pm 07:21 PM

1. Die erste Wahl für die Kombination aus Laravel Mysql Vue/React in der PHP -Entwicklungsfrage und der Antwortgemeinschaft ist die erste Wahl für die Kombination aus Laravel Mysql Vue/React aufgrund ihrer Reife im Ökosystem und der hohen Entwicklungseffizienz; 2. Die hohe Leistung erfordert Abhängigkeit von Cache (REDIS), Datenbankoptimierung, CDN und asynchronen Warteschlangen; 3. Die Sicherheit muss mit Eingabefilterung, CSRF -Schutz, HTTPS, Kennwortverschlüsselung und Berechtigungssteuerung erfolgen. V.

So verwenden Sie PHP, um soziale Freigabefunktionen zu erstellen. PHP Sharing Interface Integration Practice So verwenden Sie PHP, um soziale Freigabefunktionen zu erstellen. PHP Sharing Interface Integration Practice Jul 25, 2025 pm 08:51 PM

Die Kernmethode zum Aufbau sozialer Freigabefunktionen in PHP besteht darin, dynamisch Freigabelinks zu generieren, die den Anforderungen jeder Plattform entsprechen. 1. Erhalten Sie zuerst die aktuelle Seite oder die angegebenen URL- und Artikelinformationen. 2. Verwenden Sie Urlencode, um die Parameter zu codieren. 3.. Spleiß und generieren Teilenverbindungen gemäß den Protokollen jeder Plattform; 4. Zeigen Sie Links im vorderen Ende an, damit Benutzer klicken und freigeben können. 5. generieren Sie Dynamik OG -Tags auf der Seite, um die Anzeige der Freigabe inhaltlich zu optimieren. 6. Achten Sie darauf, dass Sie den Benutzereingaben entkommen, um XSS -Angriffe zu verhindern. Diese Methode erfordert keine komplexe Authentifizierung, weist nur geringe Wartungskosten auf und eignet sich für die meisten Anforderungen an den Inhaltsaustausch.

PHP erstellt ein Blog-Kommentarsystem zur Monetarisierung von PHP-Kommentarbewertung und Anti-Brush-Strategie PHP erstellt ein Blog-Kommentarsystem zur Monetarisierung von PHP-Kommentarbewertung und Anti-Brush-Strategie Jul 25, 2025 pm 08:27 PM

1. Maximierung des kommerziellen Wertes des Kommentarsystems erfordert die Kombination der präzisen Lieferung native Werbung, benutzerbezahlte Wertschöpfungsdienste (z. B. Bilder hochladen, Aufladungskommentare), den Incentive-Mechanismus basierend auf der Qualität der Kommentare und der Anonymen Daten Insight-Monetarisierung von Compliance; 2. Die Prüfungsstrategie sollte eine Kombination aus dynamischer Keyword-Filterung und Benutzerkennungsmechanismen vorab der Auditing einsetzen, die durch die Qualität der Kommentarqualität ergänzt werden, um die hierarchische Inhaltsbelastung zu erreichen. 3. Die Anti-Pushing erfordert die Konstruktion einer mehrschichtigen Verteidigung: Recaptchav3 sensorlose Überprüfung, Honeypot-Honeypot-Feldkennungroboter, IP und Zeitstempelfrequenzgrenze verhindert die Bewässerung, und die Erkennung von Inhalten markiert verdächtige Kommentare und ständig mit Angriffen.

Wie stylen Sie den ersten Brief oder die erste Zeile eines Absatzes? Wie stylen Sie den ersten Brief oder die erste Zeile eines Absatzes? Jul 19, 2025 am 02:58 AM

Um den Beginn eines Absatzes zur Verbesserung der visuellen Anziehungskraft zu verschönern, besteht eine gängige Praxis darin, Pseudoelemente von CSS zu verwenden oder das Dokument manuell zu stylen. In der Webentwicklung kann P :: Erste Buchstabe verwendet werden, um den ersten Buchstabenstil wie Vergrößerung, Fettdruck und Verfärbung festzulegen, aber es sollte beachtet werden, dass es nur für Elemente auf Blockebene geeignet ist. Wenn Sie die gesamte erste Zeile hervorheben möchten, verwenden Sie P :: First-Line, um Stile hinzuzufügen. In Dokumentsoftware wie Word können Sie das erste Buchstabenformat manuell anpassen oder Stilvorlagen erstellen, und InDesign verfügt über eine integrierte "Erstverkt" -Funktion, die für Veröffentlichungen und Design geeignet ist. Bei der Bewerbung müssen Sie auf Details achten, z. B. das Vermeiden komplexer Stile, die das Lesen beeinflussen und die Kompatibilität und Formatkonsistenz sicherstellen.

KOSTENLOSER Eingang zur Website Fertiger Produktressourcen. Komplettes Vue -Ferd -Produkt wird dauerhaft online angezeigt KOSTENLOSER Eingang zur Website Fertiger Produktressourcen. Komplettes Vue -Ferd -Produkt wird dauerhaft online angezeigt Jul 23, 2025 pm 12:39 PM

In diesem Artikel wurde eine Reihe von Fertigproduktressourcen-Websites der Top-Ebene für VUE-Entwickler und -Lernende ausgewählt. Über diese Plattformen können Sie massive qualitativ hochwertige Vue-Projekte kostenlos online stöbern, lernen und sogar wiederverwenden, wodurch Ihre Entwicklungsfähigkeiten und Projektpraxisfunktionen schnell verbessert werden.

Was ist der Zweck der CSS-Willensmobilie? Was ist der Zweck der CSS-Willensmobilie? Jul 23, 2025 am 03:47 AM

Will-Change ist eine CSS-Eigenschaft, mit der Browserelemente vor möglichen Änderungen zur Optimierung der Leistung informiert werden. Seine Kernfunktion besteht darin, den Browser zu ermöglichen, Schichten im Voraus zu erstellen, um die Renderungseffizienz zu verbessern. Zu den gemeinsamen Werten gehören Transformation, Opazität usw. und können auch durch mehrere Attributkommando getrennt werden. Es eignet sich für nicht standardmäßige Attributanimationen, komplexe Komponentenübergänge und Benutzerinteraktion ausgelöste Animationen. Aber es muss vermieden werden, wenn es zu einem übermäßigen Speicherverbrauch oder einer erhöhten GPU -Belastung führt. Die beste Praxis besteht darin, sich zu bewerben, bevor die Änderung stattfindet, und sie nach Abschluss der Fertigstellung zu entfernen.

Beschreiben Sie die Struktur eines CSS -Regelsatzes Beschreiben Sie die Struktur eines CSS -Regelsatzes Jul 20, 2025 am 02:49 AM

Der CSS -Regelsatz besteht aus Selektoren und Deklarationsblöcken, um den Stil von HTML -Elementen zu definieren. 1. Der Selektor gibt das Zielelement an, wie z. B. ein Tag, eine Klasse oder eine ID; 2. Deklarieren Sie den Block so, dass es Attribute und Werte enthält, um das Erscheinungsbild des Elements zu steuern. Zum Beispiel: p {color: blau; Schriftgröße: 16px;} bedeutet die Auswahl des Absatzes und die Festlegung der Textfarbe und der Schriftgröße. Beherrschen Sie diese beiden Teile, um effektive CSS -Stile zu schreiben.

Erklären Sie die verschiedenen CSS -Positionierungsschemata: statisch, relativ, absolut, fest, klebrig Erklären Sie die verschiedenen CSS -Positionierungsschemata: statisch, relativ, absolut, fest, klebrig Jul 19, 2025 am 03:19 AM

Es gibt fünf Möglichkeiten, CSS zu lokalisieren: statisch, relativ, absolut, fest und klebrig. Statisch ist die Standardpositionierung, die dem Dokumentenfluss folgt, und unterstützt keinen Offset. Relative bewegt sich relativ zu seiner ursprünglichen Position und befindet sich noch im Dokumentfluss; Das Absolute wird vom Dokumentfluss getrennt und relativ zur nächstgelegenen nicht statischen Positionierung und der Positionierung der Vorfahren positioniert. relativ zum Browserfenster festgelegt und wird häufig verwendet, um die Navigationsleiste zu reparieren. Sticky liegt zwischen relativ und fest und scrollen zu einer bestimmten Position und fixiert, geeignet für klebrige Köpfe. Die Beherrschung ihrer Verhaltensunterschiede ist der Schlüssel zum Layout.

See all articles