Les transitions CSS peuvent-elles créer un effet de fondu lors du chargement de la page ?

Création d'un effet de fondu entrant lors du chargement de la page à l'aide de transitions CSS

Les transitions CSS peuvent-elles être utilisées pour un effet de fondu sur le texte quand une page se charge ?

Pour obtenir cet effet de fondu, incorporez le CSS suivant règle :

<h1 id="test-p">test p {</h1><p>marge supérieure : 25 px ;<br> taille de la police : 21 px;<br> alignement du texte : centre ;<br> opacité : 0;<br> transition : opacité 2s easy-in;<br>}<br></p>

Maintenant, pour déclencher la transition au chargement, vous pouvez utiliser une des méthodes suivantes :

Méthode 1 : Animations CSS (pas largement Pris en charge)

<h1 id="test-p">test p {</h1><p>animation : fadein 2s;<br>}</p><p>@keyframes fadein {<br> de { opacité : 0 ; ><br> à { opacité : 1 ; ><br>}<br></p>

Méthode 2 : jQuery ou JavaScript

Exécutez le script jQuery suivant lors du chargement du document :

<br>$("#test p").addClass("load");<br>

Avec le CSS correspondant :

<h1 id="test-p">test p {</h1><p>transition : opacité 2s facilitée ;<br> opacité : 0;<br>}</p><h1 id="test-p-load">test p.load {</h1><p>opacité : 1;<br>}<br></p>

Méthode 3 : Utilisation des animations différées de jQuery

déclenchez l'animation avec un délai et définition de la durée :

<br>$("#test p").delay(1000).animate({ opacity: 1 }, 700);<br>

> ;

Notez que différentes méthodes peuvent offrir différents niveaux de compatibilité entre navigateurs, comme indiqué dans le réponses.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!