Wie man einfache CSS -Spinner macht?

In der Webentwicklung kann ein Spinner verwendet werden, um den Ladezustand der Webseite oder eines Projekts anzuzeigen. Es kann einfach über HTML- und CSS -Eigenschaften entworfen werden. Darüber hinaus sind möglicherweise keine harten und schnellen Regeln erforderlich, z. B. die Verwendung von JavaScript und anderen Programmiersprachen. Dazu das CSS “GrenzradiusEigenschaft kann verwendet werden.

In diesem Beitrag wird angegeben, wie man einen einfachen CSS -Spinner entwirft.

Wie man einfache CSS -Spinner macht?

Um einen einfachen CSS -Spinner zu erstellen, erstellen Sie zuerst einen Div -Behälter und wenden Sie dann die “anGrenzradius" Eigentum. Wenden Sie danach die jeweiligen CSS -Eigenschaften an, einschließlich “Animation","Grenzradius","verwandeln", und andere.

Probieren Sie die angegebenen Schritte aus.

Schritt 1: Machen Sie einen DIV -Behälter

Machen Sie zunächst einen Div -Behälter mit Hilfe des “" Element. Setzen Sie auch eine ein “KlasseAttribut mit einem bestimmten Namen:

Schritt 2: Machen Sie einen einfachen Spinner

Greifen Sie mit Hilfe des Klassennamens auf den erstellten Container zu und wenden Sie die folgenden CSS-Eigenschaften an:

.Spin-Container :: vor
Animation: 1.9em;
Animations-Play-State: Erbe;
Grenze: Solid 5px #C2DFFC;
Marge: 10%;
Grenzradius: 50%;
Grenzbodenfarbe: #064e18;
Transformation: Translate3D (-50%,-50%, 0);
Inhalt: "";
Höhe: 100px;
Breite: 100px;
Position: absolut;
Top: 40%;
Links: 40%;
Willensänderung: Transformation;

Hier:

• • “Animation”Ist eine Kurz -CSS -Eigenschaft, die verwendet wird, um eine Animation zwischen Stilen anzuwenden.
  • “Animationsspielstaat”Bestimmt, ob sich die Animation in einem laufenden Zustand befindet oder inne gemacht wird.
  • “GrenzeEigenschaft definiert eine Grenze um ein bestimmtes Element.
  • “Rand”Definiert einen Raum außerhalb der definierten Grenze.
  • “GrenzradiusGibt den Radius der Ecken des Elements an.
  • “Grenzbodenfarbe”Wird verwendet, um die Farbe an der Unterseite der definierten Grenze festzulegen.
  • “verwandeln”Verwandelt ein Element in 2D- oder 3D -Weise. Diese Eigenschaft ermöglicht ihren Benutzern, Elemente zu skalieren, zu verschieben, zu bewegen und zu drehen.
  • “InhaltWird zum Einfügen des Textes in das Element verwendet.
  • “Höhe" Und "BreiteEigenschaften werden verwendet, um die Größe des Elements anzugeben.
  • “Position”Gibt den Positionierungsmethode des Elements an.
  • “Spitze" Und "linksEigenschaften vergeben die Position des Elements.
  • “wird sich verändern”Hinweise auf die Browser darüber, wie sich ein Element ändern könnte.

Es kann beobachtet werden, dass der einfache Spinner erfolgreich erstellt und gestaltet wurde:

Das dreht sich nur darum, einen einfachen CSS -Spinner zu erstellen und zu stylen.

Abschluss

Um den einfachen CSS -Spinner zu machen, entwerfen Sie zunächst einen Div -Behälter. Wenden Sie dann die jeweiligen CSS -Eigenschaften an, einschließlich “Animation","Grenzradius","verwandeln","Grenzradius","Grenzbodenfarbe", und andere. Dieser Beitrag hat die Methode zum Entwerfen des einfachen CSS -Spinners demonstriert.