Maison > interface Web > tutoriel CSS > le corps du texte

Comment écrire un effet de mouvement de haut en bas en CSS

WBOY
Libérer: 2021-12-07 17:17:24
original
3973 Les gens l'ont consulté

En CSS, vous pouvez utiliser des règles d'images clés, des attributs d'animation et de transformation pour obtenir des effets de mouvement de haut en bas. La méthode d'écriture est "élément {animation : nom heure}@nom d'images clés {50%{transform : traduireY (distance de mouvement)}. }".

Comment écrire un effet de mouvement de haut en bas en CSS

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

Comment écrire le mouvement de haut en bas des éléments CSS

En CSS, vous pouvez utiliser l'attribut d'animation et les règles @keyframes pour obtenir l'effet d'animation de la décoloration des éléments Grâce aux règles @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 %.

Il existe également un attribut de transformation pour configurer le mouvement de haut en bas.

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
img{
animation:fadenum 5s ;
}
@keyframes fadenum{
   50%{transform:translateY(80px);}
}
</style>
</head>
<body>
<img  src="1118.02.png" alt="Comment écrire un effet de mouvement de haut en bas en CSS" >
</body>
</html>
Copier après la connexion

Résultat de sortie :

Comment écrire un effet de mouvement de haut en bas en CSS

(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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!