Maison >interface Web >tutoriel CSS >Comment réaliser une rotation d'image CSS3 ? Comment obtenir un effet d'animation de rotation d'image en CSS3
Comment réaliser une rotation d'image CSS3 ? Comment obtenir un effet d'animation de rotation d'image en CSS3
- 不言original
- 2018-09-12 14:24:4010956parcourir
Sur les pages Web, nous pouvons souvent voir une image tourner. Comment une telle rotation d'image est-elle réalisée ? Cet article vous présentera comment obtenir un effet d'animation de rotation d'image avec CSS3.
La rotation des images en CSS3 peut être réalisée en utilisant une combinaison de -webkit-animation et @-webkit-keyframes.
-webkit-animation est un attribut composite, défini comme suit :
-webkit-animation : nom durée timing-function delay iteration_count direction ;
name : est une méthode qui doit être spécifiée dans @-webkit-keyframes pour effectuer une animation.
durée : La durée d'exécution de l'animation en un cycle.
fonction de synchronisation : l'effet de l'exécution de l'animation peut être linéaire, ou il peut être "une entrée rapide et une sortie lente", etc.
delay : La durée de l'exécution du retard de l'animation.
iteration_count : Le nombre de fois d'exécution de la boucle d'animation Si elle est infinie, elle sera exécutée à l'infini.
direction : direction d'exécution de l'animation.
Les deux attributs from et to dans @-webkit-keyframes spécifient la valeur initiale et la valeur finale de l'exécution de l'animation.
-webkit-animation-play-state:paused; Met en pause l'exécution de l'animation.
Après avoir compris les valeurs d'attribut utilisées en CSS3 pour implémenter la rotation d'image, regardons directement le code de CSS3 pour implémenter l'animation de rotation d'image :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>transform</title>
<style>
#loader {
display: block;
position: relative;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="test" >
<img src="http://img4.imgtn.bdimg.com/it/u=3413495237,2076545415&fm=26&gp=0.jpg" style="width:250px;height:250px" id="loader" />
</div>
</body>
</html>C'est tout pour cet article C'est terminé. Pour plus de propriétés d'animation en CSS3, veuillez vous référer au Manuel d'apprentissage CSS3.
Recommandations associées :
CSS3 pour réaliser le grossissement et la rotation des images_html/css_WEB-ITnose
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!