Heim > Artikel > Web-Frontend > So verwenden Sie HTML und CSS, um einen Animationseffekt beim Laden von Seiten zu erzielen

So verwenden Sie HTML und CSS, um einen Animationseffekt beim Laden von Seiten zu erzielen

yuliaOriginal: 2018-10-30 14:41:195325Durchsuche

Beim Durchsuchen einer Website kommt es häufig zu der Situation „Laden, bitte warten“. Zu diesem Zeitpunkt erscheint ein Kreis auf der Seite, der sich weiter dreht, bis der Ladevorgang abgeschlossen ist. Freunde, die HTML und CSS lernen, können Sie HTML und CSS verwenden, um einen Animationseffekt beim Laden von Seiten zu erzielen? In diesem Artikel wird die CSS3-Seitenladeanimation mit allen untersucht und der Code der Seitenladeanimation mit allen geteilt. Interessierte Freunde können darauf verweisen.

Um Animationseffekte beim Laden von Seiten zu erzielen, müssen viele Attribute in CSS verwendet werden, z. B. Animationsanimationen, Keyframes, abgerundete Ecken mit Rahmenradius, Rahmenattribute usw. Wenn Freunde diese Attribute nicht kennen, können Sie sie gerne kontaktieren Weitere Informationen finden Sie in den entsprechenden Handbüchern auf der chinesischen PHP-Website: CSS-Handbuch. Ich hoffe, es wird Ihnen hilfreich sein.

Das Folgende ist ein detailliertes Beispiel für die Verwendung von HTML und CSS3 zum Implementieren von Animationseffekten zum Laden (Laden) von Seiten:

HTML-Teil

Erstellen Sie ein Div, um die Ladeanimation anzuzeigen, und geben Sie dem Div einen Klassennamen, um das Styling zu erleichtern. (Wenn nicht viele Stile vorhanden sind, können Sie den Stil auch innerhalb des Tags festlegen.) Der spezifische Code lautet wie folgt folgt:

<body>
  <p style="font-size: 20px;">CSS加载样式</p>
  <div class="load"></div>
 </body>

CSS-Teil

Das Grundgerüst der Seite ist bereits vorhanden. Jetzt müssen Sie die Länge und Höhe der Seite festlegen div auf 120px und setzen Sie den Attributwert „border-radius“ auf 50 %. Verwandeln Sie es in einen Kreis und legen Sie mit „border-top“ und „border-bottom“ den oberen und unteren Bogen fest, um nachfolgende Animationseinstellungen zu erleichtern.

Um es rotieren zu lassen, müssen Sie schließlich Animationen und @keyframes-Attribute verwenden. Der spezifische Code lautet wie folgt:

Hinweis: Achten Sie bei der Verwendung von Animationen und @keyframes-Animationen darauf auf Browserkompatibilität. (Fügen Sie beispielsweise die Präfixe -webkit- und -ms- hinzu)

.load {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-bottom: 16px solid blue;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
   }  
   @-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
    }
   
   @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }

Effekt-Rendering wird geladen:

So verwenden Sie HTML und CSS, um einen Animationseffekt beim Laden von Seiten zu erzielen

Das Obige ist Mit allen geteilt So erzielen Sie mit HTML und CSS3 Animationseffekte beim Laden von Seiten. Die HTML- und CSS-Teile werden im Detail erklärt. Es ist relativ einfach, es zu verstehen Sehen Sie selbst, ob Ihr Code diesen Seitenladeeffekt erzielen kann. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein!

[Verwandte Tutorial-Empfehlungen]

1. CSS3-Referenzhandbuch
2 >Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML und CSS, um einen Animationseffekt beim Laden von Seiten zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css bootstrap css3 html webkit class border animation

Stellungnahme：

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

Vorheriger Artikel：Wie stelle ich das Float-Center in CSS ein?Nächster Artikel：Wie stelle ich das Float-Center in CSS ein?

In Verbindung stehende Artikel

Mehr sehen