En CSS, vous pouvez utiliser des attributs d'animation et des règles @keyframes pour obtenir des effets de carrousel d'images. Utilisez simplement @keyframes pour créer d'abord l'animation ; puis utilisez l'attribut d'animation pour définir la durée, la vitesse et le nombre d'animations requises.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3
Préparez d'abord plusieurs images de même taille, et les images seront affichées horizontalement. Placées dans un conteneur d'images. Ajoutez un conteneur d'affichage en dehors du conteneur d'image. La taille du conteneur d'affichage est la taille de l'image. Ajoutez une animation personnalisée au conteneur d'image et définissez des valeurs de décalage incrémentielles à différentes étapes de l'animation.
L'effet d'animation est divisé en deux parties : la commutation et le maintien. L'étape d'animation personnalisée est liée au nombre d'images, et la valeur de décalage de chaque étape de l'animation est liée à la taille de l'image.
L'exemple dans cet article est de passer de la première image à la dernière image.
HTML
<body>
<div id="container">
<div id="photo">
<img src="/static/imghwm/default1.png" data-src="images/1.jpg" class="lazy" / alt="Comment implémenter un carrousel d'images en utilisant du CSS pur" >
<img src="/static/imghwm/default1.png" data-src="images/2.jpg" class="lazy" / alt="Comment implémenter un carrousel d'images en utilisant du CSS pur" >
<img src="/static/imghwm/default1.png" data-src="images/3.jpg" class="lazy" / alt="Comment implémenter un carrousel d'images en utilisant du CSS pur" >
</div>
</div>
</body> Analyse :
Trois éléments img sont créés ici. À l'extérieur de l'élément img se trouve un conteneur d'image, et à l'extérieur du conteneur d'image se trouve un conteneur d'affichage. .
CSS
<style type="text/css">
#container {
width: 400px;
overflow: hidden;
}
#photo {
width: 1200px;
animation: switch 5s ease-out infinite;
}
#photo > img {
float: left;
width: 400px;
}
@keyframes switch {
0%, 25% {
margin-left: 0;
}
35%, 60% {
margin-left: -400px;
}
70%, 100% {
margin-left: -800px;
}
}
</style>Rendu :
Analyse :
La taille du conteneur d'affichage est la même que la taille de l'image
Ajoutez un effet flottant à l'image sans avoir à prendre en compte le problème de marge gênant
Comme l'exemple ne comporte que trois images, trois étapes d'animation sont ajoutées. Chaque étape obtient l'effet de commutation en définissant une valeur de marge gauche croissante ; définir La scène (par exemple : 35 % ~ 60 %) est la partie de séjour de l'animation, et le temps libre de l'étape précédente (par exemple : 25 % ~ 35 %) est la partie de commutation d'animation. La durée de chaque partie doit être définie. être contrôlé par vous-même.
-
Étude recommandée : "
Tutoriel vidéo 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!
Quelle est la spécificité de @rules, comme @keyframes et @media?Apr 18, 2025 am 11:34 AMJ'ai eu cette question l'autre jour. Ma première pensée est: une question étrange! La spécificité concerne les sélecteurs, et les rubriques ne sont pas des sélecteurs, donc ... non pertinents?
Pouvez-vous nist @media et @Support Queries?Apr 18, 2025 am 11:32 AMOui, vous le pouvez, et cela n'a pas vraiment d'importance dans quel ordre. Un préprocesseur CSS n'est pas requis. Il fonctionne dans CSS ordinaire.
Buste de cache de gorgée rapideApr 18, 2025 am 11:23 AMVous devriez à coup sûr définir des en-têtes de cache éloignés sur vos actifs comme CSS et JavaScript (et des images et polices et quoi que ce soit d'autre). Cela dit au navigateur
À la recherche d'une pile qui surveille la qualité et la complexité de CSSApr 18, 2025 am 11:22 AMDe nombreux développeurs écrivent sur la façon de maintenir une base de code CSS, mais peu d'entre eux écrivent sur la façon dont ils mesurent la qualité de cette base de code. Bien sûr, nous avons
Le datalist est destiné à suggérer des valeurs sans appliquer de valeursApr 18, 2025 am 11:08 AMAvez-vous déjà eu un formulaire qui devait accepter un petit texte arbitraire? Comme un nom ou autre chose. C'est exactement à quoi sert. Il y a beaucoup de
Conférence avant à ZurichApr 18, 2025 am 11:03 AMJe suis tellement excité de me diriger vers Zurich, en Suisse pour la conférence de Front (j'adore ce nom et URL!). Je n'ai jamais été en Suisse auparavant, donc je suis excité
Construire une application sans serveur complète avec des travailleurs CloudFlareApr 18, 2025 am 10:58 AML'un de mes développements préférés dans le développement de logiciels a été l'avènement de Serverless. En tant que développeur qui a tendance à s'enliser dans les détails
Création de routes dynamiques dans une application NuxtApr 18, 2025 am 10:53 AMDans cet article, nous utiliserons une démo de magasin de commerce électronique que j'ai construit et déployé sur Netlify pour montrer comment nous pouvons faire des itinéraires dynamiques pour les données entrantes. C'est assez
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.
DVWA
Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel
Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
