Comment obtenir un effet d'animation de rotation et de mise à l'échelle en CSS3-tutoriel CSS-php.cn

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

WBOY

Libérer： 2021-12-16 11:45:54

original

2498 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

Résultat de sortie :

Comment obtenir un effet danimation de rotation et de mise à léchelle en CSS3