So verwenden Sie HTML und CSS, um einen Animationseffekt beim Laden von Seiten zu erzielen-CSS-Tutorial-php.cn

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

yulia

Freigeben： 2018-10-30 14:50:35

Original

5397 Leute haben es durchsucht

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>

Nach dem Login kopieren

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);}
    }

Nach dem Login kopieren

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!