Maison >interface Web >tutoriel CSS >Comment obtenir l'effet de fondu des pages Web en CSS3

Comment obtenir l'effet de fondu des pages Web en CSS3

WBOYoriginal: 2021-12-21 17:12:192832parcourir

Méthode : 1. Utilisez l'instruction "body{animation: name time}" pour lier l'animation au corps de l'élément de page Web ; 2. Utilisez l'instruction "@keyframes name {0%{opacity:0;}}" pour définir l'animation de la page Web se fond dans l'image clé, l'attribut d'opacité est utilisé pour définir la transparence de l'élément.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment obtenir l'effet de fondu d'une page Web en CSS3

En CSS, vous pouvez utiliser l'attribut d'animation et la règle @keyframes pour obtenir l'effet d'animation consistant à modifier la largeur de l'élément. la règle @keyframes, vous pouvez créer des animations.

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Utilisez l'attribut opacité pour définir l'action d'animation. Cette propriété est utilisée pour définir la transparence d'un élément. Le format de syntaxe de l'attribut

animation est le suivant :

animation: name duration timing-function delay iteration-count direction;

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
<style>
body{
animation:fadenum 10s;
}
@keyframes fadenum{
   0%{opacity: 0;}
}
</style>
</head>
<body>
<img  src="1118.02.png" alt="Comment obtenir l'effet de fondu des pages Web en CSS3" >
网页元素
</body>
</html>

Résultat de sortie :

Comment obtenir leffet de fondu des pages Web en CSS3

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

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!

html5 css css3 选择器 animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：A quoi sert la transition en CSS3Article suivant：A quoi sert la transition en CSS3

Articles Liés

Voir plus