Cet article fournira :
- Méthode 1 : effet de fondu à l'aide de la propriété d'animation CSS
- Méthode 2 : effet de fondu à l'aide de la propriété de transition CSS
Méthode 1 : effet de fondu à l'aide de la propriété « animation » CSS
Pour concevoir une page HTML simple, ajoutez-y l'élément suivant :
- Ajouter le ' ' élément avec le ' style ' attribut. L'attribut 'style' contient les propriétés de style de l'élément.
- Appliquer le ' Couleur ” dans l'attribut style pour définir la couleur du texte de l'élément.
- Après cela, utilisez le ' ” élément pour ajouter du texte ou un simple paragraphe.
Ci-dessous le code HTML :
< h2 style = 'couleur : RVB (84, 8, 191)' >
Site Web du didacticiel Linuxhint
< / h2 >
< p > effet de fondu au chargement de la page < / p >
La page HTML est créée avec succès :
Dans la section CSS, pour appliquer l'effet de fondu sur la page, le ' animation ' La propriété CSS sera utilisée sur le '
Élément de style 'corps'
corps {animation : fadeInPage facilité 3s ;
nombre d'itérations d'animation : un ;
}
Le '
' est appliqué avec les propriétés CSS suivantes :- ' animation ” est la propriété abrégée qui définit l'animation en spécifiant plusieurs valeurs. Ici, le nom de l'animation, la fonction de synchronisation de l'animation et la durée de l'animation sont définis.
- ' nombre d'itérations d'animation ” définit combien de fois l'animation doit itérer.
Appliquer les règles '@keyframes' sur 'l'animation'
@keyframes fadeInPage {0 % {
opacité: 0 ;
}
100 % {
opacité: un ;
}
}
Pour définir le « @images clés ” pour l'animation, mentionnez le nom de l'animation après le mot-clé @keyframes. Modifiez le comportement de l'animation comme suit :
- À ' 0% ' animations, le ' opacité ” La propriété reçoit la valeur 0. Cela signifie que lorsque l'animation démarre, l'image est transparente.
- À ' 100% ' animation, l'opacité est définie sur ' un », qui fait référence à une couleur unie.
Sortir
Passons à la deuxième méthode pour appliquer l'effet Fade-in au chargement de la page.
Méthode 2 : effet de fondu à l'aide de la propriété CSS 'transition'
Ajouter un ' en charge ' attribut dans le '
Dans cet exemple, le CSS ' passage ” est utilisée pour ajouter un effet de fondu entrant :
corps {opacité: 0 ;
transition : opacité 6s ;
}
Voici l'explication des propriétés indiquées ci-dessus :
- ' opacité ” propriété définit la transparence des éléments.
- Utiliser CSS ' passage ”, modifier progressivement les valeurs des propriétés sur un temps spécifié.
Sortir
Nous vous avons appris les méthodes d'utilisation du CSS pour un effet de fondu au chargement de la page.
Conclusion
Plusieurs propriétés CSS peuvent être utilisées pour appliquer un effet de fondu sur les éléments HTML. Plus précisément, le « animation ”, “ opacité ', et ' passage ” Les propriétés peuvent être utilisées pour spécifier des effets animés sur des pages ou des éléments. Les animations sont ajustées en utilisant le ' @image clé ' des règles. Cet article a expliqué les méthodes pour ajouter un effet de fondu au chargement de la page à l'aide de CSS.