Maison > Article > interface Web > Comment obtenir un effet d'animation de rotation et de mise à l'échelle en CSS3
Comment obtenir un effet d'animation de rotation et de mise à l'échelle en CSS3
- WBOYoriginal
- 2021-12-16 11:45:542436parcourir
Méthode : 1. Utilisez l'instruction "element {animation: name time}" pour lier l'animation de rotation et de mise à l'échelle à l'élément ; 2. Utilisez "@keyframes name {100%{transform:rotate(rotation angle) scale(scale ratio);} }" pour obtenir l'effet d'animation de rotation et de mise à l'échelle.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment obtenir des effets d'animation de rotation et de mise à l'échelle en CSS3
En CSS, vous pouvez utiliser l'attribut d'animation pour lier des animations de rotation et de mise à l'échelle 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 scale() pour définir la mise à l'échelle 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;
margin:0 auto;
animation:fadenum 5s;
}
@keyframes fadenum{
100%{transform:rotate(180deg) scale(0.5,0.5);}
}
</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!