Maison >interface Web >tutoriel CSS >Exemple de code pour implémenter l'effet de rotation d'avatar à l'aide de CSS3
Exemple de code pour implémenter l'effet de rotation d'avatar à l'aide de CSS3
- 高洛峰original
- 2017-03-15 09:07:011625parcourir
Cet article présente principalement l'effet de rotation des avatars en utilisant CSS3. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un oeil
L'effet de la souris n'est pas placé :
Effet de rotation après avoir placé la souris :
transition : tous 2.0 signifie tous attributs La transformation est terminée en 2 secondes ;
transform : rotate(360deg); signifie que l'image est pivotée de 360 degrés.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
border: #000 solid 2px;
display: block;
margin: 50px auto;
border-radius: 50%;
transition: all 2.0s;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="img/03.jpg" / alt="Exemple de code pour implémenter l'effet de rotation d'avatar à l'aide de CSS3" >
</body>
</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!