Comment obtenir l'effet de fondu des pages Web en CSS3-tutoriel CSS-php.cn

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

WBOY

Libérer： 2021-12-21 17:12:19

original

2791 Les gens l'ont consulté

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.

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

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;

Copier après la connexion

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>

Copier après la connexion

Résultat de sortie :

Comment obtenir leffet de fondu des pages Web en CSS3