Maison > Article > interface Web > Comment faire bouger les images de haut en bas en HTML
Comment faire bouger une image de haut en bas en HTML : 1. Utilisez l'attribut d'animation pour lier une animation animée à l'image ; 2. Utilisez le "nom de l'animation @keyframes {50%{transform:translateY(moving distance); }}" instruction pour définir chaque animation. Une image d'action, contrôlant le déplacement de l'image de haut en bas.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En html, vous pouvez utiliser animation
属性和“@keyframes
”创建一个图片上下移动的动画;动画中使用transform:translateY()
pour contrôler le mouvement des images.
Code d'implémentation :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ } @keyframes mymove { 50% { transform: translateY(100px); } } @-webkit-keyframes mymove/* Safari and Chrome */ { 50% { transform: translateY(100px); } } </style> </head> <body> <div></div> </body> </html>
Tutoriel recommandé : "Tutoriel vidéo html"
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!