Maison >interface Web >tutoriel CSS >L'attribut animation implémente directement la méthode carrousel
L'attribut animation implémente directement la méthode carrousel
- php中世界最好的语言original
- 2018-03-21 11:56:491547parcourir
Cette fois, je vais vous présenter la méthode d'implémentation directe d'un carrousel avec des attributs d'animation. Quelles sont les précautions pour implémenter un carrousel avec des attributs d'animation. Voici un cas pratique, jetons un oeil.
Introduction à l'animation :
La propriété d'animation de CSS3 peut être utilisée pour contrôler chaque étape de l'animation en contrôlant les images clés, tout comme l'animation Flash. . Effets d'animation plus complexes. L'effet d'animation obtenu par l'animation se compose principalement de deux parties :
1) Déclarer une animation à travers des images similaires à celles de l'animation Flash
2) Appeler l'animation déclarée par des images clés dans l'animation ; attribut.
Valeur de l'attribut d'animation :
L'attribut d'animation est un attribut abrégé
Syntaxe : animation : nom durée durée-fonction délai iteration-count direction;
Les six attributs d'animation définis par animation :
animation-name : stipule qu'il doit être lié. Le nom de l'image clé attribué au sélecteur. Valeurs :
aucun : (par défaut) Spécifie aucun effet d'animation (peut être utilisé pour remplacer les animations des cascades).
keyframename : Spécifie le nom de l'image clé qui doit être liée au sélecteur.
animation-duration : Spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes. Valeur :
time : Spécifie le temps nécessaire pour terminer l'animation. La valeur par défaut est 0, ce qui signifie aucun effet d'animation.
animation-timing-function : Spécifie la courbe de vitesse de l'animation. Valeur :
facilité : Par défaut. L'animation démarre à une vitesse lente, puis s'accélère, puis ralentit avant de se terminer.
linéaire : La vitesse d'animation est la même du début à la fin.
ease-in : L'animation démarre à faible vitesse.
ease-out : L'animation se termine à faible vitesse.
facilité d'entrée : l'animation démarre et se termine à une vitesse lente.
cubic-bezier(n,n,n,n) : Définissez vos propres valeurs dans la fonction cubique-bezier. Les valeurs possibles sont des valeurs numériques de 0 à 1.
animation-delay : Spécifie le délai avant le début de l'animation. Valeurs :
time : (facultatif) Définit le temps d'attente avant de démarrer l'animation, en secondes ou millisecondes. La valeur par défaut est 0.
animation-iteration-count : Spécifie le nombre de fois que l'animation doit être jouée. Valeur :
n : Définit le nombre de fois de lecture de l'animation.
infini : Spécifie que l'animation doit être jouée à l'infini.
animation-direction : Spécifie si l'animation doit être jouée à l'envers à tour de rôle. Valeurs :
normal : valeur par défaut. L'animation devrait jouer normalement.
alternative : L'animation doit être jouée à l'envers à tour de rôle.
animation image du carrousel de mise en œuvre de l'animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮换</title>
<style type="text/css">
p,img{
margin: 0;
padding: 0;
}
.p_first{
width: 1000px;
height: 300px;
margin-top: 100px;
margin-left: 250px;
overflow: hidden;
}
.p_second{
width: 4000px;
position: relative;
animation: myimg 12s linear infinite normal;
}
@keyframes myimg{
0{
left: 0;
}
5%{
left: 0;
}
30%{
left: -1000px;
}
35%{
left: -1000px;
}
60%{
left: -2000px;
}
65%{
left: -2000px;
}
95%{
left: -3000px;
}
100%{
left: -3000px;
}
}
</style>
</head>
<body>
<p class="p_first">
<p class="p_second">
<img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt="">
</p>
</p>
</body>
</html>
Les balises d'image doivent être placées sur la même ligne, sinon il y aura des espaces entre les images.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !
Lecture recommandée :
Explication détaillée de l'utilisation des événements de pointeur en CSS3
Explication détaillée de l'utilisation de concentration intérieure
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!