Maison > Article > interface Web > Comment obtenir un effet d'animation de zoom en CSS3

Comment obtenir un effet d'animation de zoom en CSS3

WBOYoriginal: 2021-12-08 14:26:007587parcourir

En CSS, vous pouvez utiliser la règle "@keyframes", les attributs d'animation et de transformation pour obtenir l'effet d'animation de zoom. La syntaxe est "element {animation: name time} @keyframes name {100%{transform:scale(x, y);}} ".

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

Comment obtenir un effet d'animation de mise à l'échelle en CSS3

En CSS, vous pouvez utiliser l'attribut d'animation et la règle @keyframes pour obtenir l'effet d'animation de la mise à l'échelle des éléments. Grâce à la règle @keyframes, vous pouvez créer une animation.

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 %.

Il existe également un attribut de transformation utilisé pour définir l'effet de mise à l'échelle des éléments. La propriété transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
img{
animation:fadenum 5s ;
}
@keyframes fadenum{
   100%{transform:scale(0.5,0.5);}
}
</style>
</head>
<body>
<img  src="1118.02.png" alt="Comment obtenir un effet d'animation de zoom en CSS3" >
</body>
</html>

Résultat de sortie :

Comment obtenir un effet danimation de zoom en CSS3

(Partage de vidéos 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 选择器 transform 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：Quel est le code CSS pour modifier la couleur de la bordure du tableau ?Article suivant：Quel est le code CSS pour modifier la couleur de la bordure du tableau ?

Articles Liés

Voir plus