Erstellen eines Einblendeffekts beim Laden der Seite mithilfe von CSS-Übergängen
Können CSS-Übergänge für einen Einblendeffekt auf Text verwendet werden? wenn eine Seite geladen wird?
Um diesen Einblendeffekt zu erzielen, integrieren Sie das folgende CSS Regel:
</p> <h1>test p {</h1> <p>margin-top: 25px;<br> font-size: 21px;<br> text-align: center ;<br> Deckkraft: 0;<br> Übergang: Deckkraft 2s easy-in;<br>}<br>
Um nun den Übergang beim Laden auszulösen, können Sie eine der folgenden Methoden verwenden:
Methode 1: CSS-Animationen (nicht weit verbreitet Unterstützt)
</p> <h1>test p {</h1> <p>animation: fadein 2s;<br>}</p> <p>@keyframes fadein {<br> from { opacity: 0; }<br> bis { opacity: 1; }<br>}<br>
Methode 2: jQuery oder JavaScript
Führen Sie das folgende jQuery-Skript beim Laden des Dokuments aus:
<br>$("#test p").addClass("load");<br>
Mit dem entsprechenden CSS:
</p> <h1>test p {</h1> <p>Übergang: Deckkraft 2 Sekunden Einzug;<br> Deckkraft: 0;<br>}</p> <h1>test p.load {</h1> <p>Deckkraft: 1;<br>}<br>
Methode 3 : Mit den verzögerten Animationen von jQuery
wird die Animation mit einer Verzögerung ausgelöst und Dauer festlegen:
<br>$("#test p").delay(1000).animate({ opacity: 1 }, 700);<br>
Beachten Sie, dass verschiedene Methoden möglicherweise unterschiedliche Grade der browserübergreifenden Kompatibilität bieten, wie in den bereitgestellten Antworten erläutert.
Das obige ist der detaillierte Inhalt vonKönnen CSS-Übergänge einen Einblendeffekt beim Laden der Seite erzeugen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!