Méthode : 1. Utilisez l'attribut d'animation pour lier l'animation à l'élément ; 2. Utilisez l'instruction "@keyframes name {100%{transform:rotate (rotation angle) translation (displacement distance);}}" pour définir la rotation. et le déplacement des images clés d'action de l'élément pour obtenir des effets d'animation de rotation et de déplacement.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment implémenter une animation de rotation et de déplacement en CSS3
En CSS, vous pouvez utiliser l'attribut d'animation pour lier l'animation de rotation et de déplacement aux éléments.
Utilisez la règle @keyframes pour définir les images clés de l'action d'animation de l'élément, utilisez l'attribut transform avec la fonction rotate() pour définir l'action de rotation de l'élément et utilisez l'attribut transform avec la fonction translation() pour définir le déplacement de l'élément. action.
L'exemple est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background:pink;
border-radius:50%;
margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
0%{transform:rotate(360deg) translateX(-200px);}
}
</style>
</head>
<body>
<div class="div1">这是一个旋转加位移的效果</div>
</body>
</html>Résultat de sortie :
(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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
