Erstellen Sie erweiterte Ladebildschirme mit CSS-CSS-Tutorial-php.cn

Erstellen Sie erweiterte Ladebildschirme mit CSS

WBOY

Freigeben： 2023-09-17 23:13:02

nach vorne

591 Leute haben es durchsucht

使用 CSS 创建高级加载屏幕

Beim Durchsuchen verschiedener Seiten einer Website müssen Entwickler der Website Ladebildschirme hinzufügen, damit die Website genügend Zeit hat, zwischen den Webseiten zu wechseln. Ladebildschirme sind eine effektive Möglichkeit für Benutzer, zu warten, während eine Website-Seite geladen/initialisiert wird.

Wie erstelle ich einen Ladebildschirm?

Um einen Ladebildschirm zu erstellen, können wir HTML und CSS verwenden. Zuerst erstellen wir ein div-Element, in dem wir einen Titel-Tag angeben, der den Prozentsatz anzeigt.

Wir verwenden dann CSS-Eigenschaften (z. B. Randradius), um Höhe und Breite anzugeben und dem Ladeelement eine Animation hinzuzufügen. Wir werden das Overflow-Attribut auch verwenden, um das Element auszublenden, sodass wir nur den Hauptinhalt sehen können.

Grammatik

Das Folgende ist die Syntax des Überlaufattributs -

p {
   overflow: hidden/ visible/ scroll/ auto;
}

Nach dem Login kopieren

In der obigen Syntax können Sie sehen, dass die mit dem Überlaufattribut verwendeten Werte der versteckte Wert sein können, um das Element auszublenden, der sichtbare Wert, um das Element sichtbar zu machen, und das Scroll-Attribut, um einen Schieberegler hinzuzufügen, wenn das Element ausgeblendet ist .

Sehen wir uns ein Beispiel an, um Ladebildschirme besser zu verstehen.

Beispiel

Im unten angegebenen Code haben wir das Titel-Tag und einen div-Container deklariert, darin unseren Ladecontainer erstellt und ihn dann mit Farbe gefüllt und Animationen hinzugefügt. Danach haben wir im Container einen zweiten Titel hinzugefügt, um den Prozentsatz anzuzeigen, und eine Keyframe-Funktion zum Drehen um 360 Grad hinzugefügt. Werfen wir einen Blick auf die Ausgabe des Codes.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Advanced Loading Screen</title>
   <style>
      body {
         background-color: #111;
      }
      h2 {
         color: white;
         text-align: center;
         margin: 20px 0;
         font-size: 70px;
      }
      .screen {
         height: 250px;
         margin: auto;
         border-radius: 50%;
         position: relative;
         width: 250px;
         top: 20%;
         border: 4px solid #DDD;
         overflow: hidden;
      }
      @keyframes rotate {
         to {
            transform: rotate(358deg);
         }
      }
      .screen::after {
         content: "";
         position: absolute;
         top: 25%;
         left: -50%;
         height: 300%;
         width: 200%;
         nimation: rotate 10s linear forwards infinite;
         background-color: blue;
         border-radius: 50%;
         box-shadow: 0 3 10px #4CAF50;
         opacity: 0.9;
      }
      h3 {
         color: white;
         font-size: 70px;
         text-align: center;
         position: relative;
         top: 14%;
      }
   </style>
</head>
<body>
   <h2>Loading Screen</h2>
   <div class="screen">
      <h3>50%</h3>
   </div>
</body>
</html>

Nach dem Login kopieren

In der Ausgabe oben können Sie sehen, dass wir zuerst das Titel-Tag deklarieren, dann den Container, dem wir eine Farbe hinzufügen, die unseren zweiten Titel anzeigt, und dann die Animation innerhalb des Containers. Die Animation dreht sich um 360 Grad über dem Prozenttitel.

Beispiel

Hier ist ein weiteres Beispiel für die Erstellung eines erweiterten Ladebildschirms. Im folgenden Beispiel deklarieren wir ein div-Element und geben ihm dann eine Klasse, um das Element mithilfe von CSS-Eigenschaften zu formatieren. Wir haben dem Rand schwarze und rote Farben hinzugefügt, eine Animation hinzugefügt und die Keyframes-Funktion verwendet, um den Container um 360 Grad zu drehen. Der obige Code zeigt, wie man unserer Webseite einen Ladebildschirm hinzufügt.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of the advanced loading screen</title>
   <style>
      @keyframes spin {
         100% {
             transform: rotate(359deg);
         }
         0% {
            transform: rotate(0deg);
         }
      }
      .load {
        border-bottom: 14px solid black;
        border-right: 14px solid red;
        border-left: 14px solid red;
        border-top: 14px solid black;
        border-radius: 49%;
        width: 120px;
        animation: spin 3s linear infinite;
        height: 120px;
      }
      @keyframes spin {
         0% {
            transform: rotate(0deg);
         }
         100% {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
<body>
   <div class="load"></div>
</body>
</html>

Nach dem Login kopieren

In der Ausgabe sehen Sie die beiden Farben um 360 Grad gedreht, was dem Benutzer den Eindruck vermittelt, dass die Seite geladen wird. Mit dem Attribut align können Sie den Loader an der Mitte der Seite ausrichten.

HINWEIS – Das Keyframe-Attribut ist eine Eigenschaft von CSS, die es Entwicklern ermöglicht, HTML-Elemente ohne Verwendung von JavaScript zu animieren, und diese Keyframes geben den Stil an, den das Element haben soll.

Keyframe-Eigenschaften geben an, wie lange die Animation ausgeführt werden muss, und die verwendeten Übergänge sollten glatt und präzise sein. Der Prozentsatz sollte angegeben werden und der Entwickler muss sicherstellen, dass die Animation mit allen Browsern kompatibel ist.

Fazit

Webentwickler verwenden je nach Projekt, an dem sie arbeiten, unterschiedliche Arten von Stilen und Animationen, um Ladebildschirme zu erstellen. Es ist von entscheidender Bedeutung, den Ladebildschirm ein wenig anders zu gestalten und kreative Anstrengungen zu unternehmen, da Benutzer oft durch das Aussehen des Ladebildschirms und die Zeit, die zum Laden der Seite benötigt wird, abgelenkt werden. Der Hauptzweck dieser Ladebildschirme besteht darin, die Website interaktiv zu gestalten und die Benutzer nicht zu langweilen, wenn das Laden/Starten der Seite viel Zeit in Anspruch nimmt.

Das obige ist der detaillierte Inhalt vonErstellen Sie erweiterte Ladebildschirme mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!