Comment obtenir un effet de défilement d'image avec CSS3 (avec code)

CSS3 pour obtenir un effet de molette de défilement d'image

En temps normal, nous utilisons des effets d'image de défilement, qui sont tous implémentés avec du code javascript ( JQuery), mais à l'ère actuelle où HTML5 et CSS3 sont répandus, le code JavaScript peut être remplacé pour obtenir certains effets courants visant à améliorer la vitesse de chargement des pages Web, rendant ainsi l'expérience plus conviviale.

Particulièrement à cette époque où le développement de la plateforme WeChat est relativement chaud, son remplacement par HTML5+CSS3 apportera une expérience de terminal mobile plus merveilleuse pour le même effet. Par exemple, cet article présentera l'effet de molette de défilement d'image CSS3.

Les points de connaissances contenus dans cet article proviennent des documents officiels de W3School et des règles CSS3 @keyframes.

Lien de l'adresse : http://www.w3school.com.cn/css3/css3_animation.asp

Règles de grammaire :

@keyframes 
animationname
 {
keyframes-selector
 {
css-styles
;}}

Animationname est le nom de l'animation, développé par l'utilisateur, le sélecteur d'images clés est le pourcentage de la durée de l'animation (vous pouvez contrôler sa vitesse de déplacement).

Principe : Il y a un grand p imbriqué à l'intérieur d'un petit p. Le petit p a la même hauteur et la même largeur que l'image unique à afficher. À l'intérieur du grand p se trouve une liste horizontale contenant toutes les images à afficher. affiché Pendant l'exécution, le changement d'image est obtenu en changeant la position horizontale du grand p (en déplaçant la largeur d'une image vers la gauche ou la droite à chaque fois).

Code clé HTML :

<p class="container">
 
<p class="img">
 
<ul class="nav">
 
<li><a href="#"><img src="imgs/logo.png"></a></li>
 
<li><a href="#"><img src="imgs/name.png"></a></li>
 
<li><a href="#"><img src="imgs/mmc.png"></a></li>
 
</ul>
 
</p>
 
</p>

Code clé style CSS :

.nav{
 
width:2000px;
 
height:150px;
 
position:absolute;
 
left:0px;
 
top:0;
 
z-index:9;
 
animation:myfirst 6s infinite;
 
-webkit-animation:myfirst 6s infinite;
 
-0-animation:myfirst 6s infinite;
 
-moz-animation:myfirst 6s infinite;
 
}
 
@keyframes myfirst
 
{
 
0%   {left: 0px;}
 
26.6%   {left: 0px;}
 
36.6%   {left: -320px;}
 
63.2%   {left: -320px;}
 
73.2%   {left: -640px;}
 
99.7%   {left: -640px;}
 
100% {left: -0px;}
 
}

Si vous souhaitez modifier le formulaire de présentation Vous besoin d'ajuster le pourcentage (temps de séjour de l'image et vitesse de défilement) et la distance de déplacement.

La technologie CSS3 prend en compte les problèmes de compatibilité des navigateurs, il est donc nécessaire d'écrire des styles pour chaque navigateur. Le nom est changé en ceci, et les autres sont les mêmes.

@-o-keyframes myfirst

@-moz-keyframes myfirst

@-webkit-keyframes myfirst

Voir la démo

pour l'algorithme de défilement optimisation

Lien de démonstration

http://wongletion.sinaapp.com/

Cet article est reproduit à partir de : https://blog.csdn.net/u013741507/ article/détails/ 38779093

Tutoriel recommandé : "Tutoriel 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!