Commentaire: En ce qui concerne le curseur, dans le passé, CSS + JS a été utilisé pour réaliser des effets de commutation connexes. J'ai entendu dire que tout le monde a discuté de la méthode d'implémentation d'utilisation de HTML5 + CSS3, mais je ne l'ai jamais implémenté moi-même. Ok, j'ai le temps de jouer CSS3 cette fois. Les amis intéressés peuvent en savoir plus
Eh bien, la dernière fois, j'ai dit que j'ajouterais rapidement quelques articles, mais j'ai calmement brisé le rendez-vous. Il n'a été publié que dans un autre mois, ce qui est vraiment déprimant. J'ai trouvé que je n'avais toujours pas pu trouver de temps récemment et que je me suis essentiellement organisé un projet après l'autre. Soit je ne pouvais pas trouver le bon sujet quand j'étais libre, ou je n'ai pas pu trouver de temps quand j'étais confus. J'ai donc décidé de résumer les points de connaissance des problèmes avec lesquels je lutte depuis un certain temps, et de les étudier un par un quand je suis libre, puis de les organiser en articles et de les partager.À partir du sujet, lorsque vous mentionnez le curseur, vous avez toujours utilisé CSS + JS pour réaliser des effets de commutation connexes. J'ai entendu dire que tout le monde a discuté de la méthode d'implémentation d'utilisation de HTML5 + CSS3, mais je ne l'ai jamais implémenté moi-même. Ok, j'ai le temps de jouer CSS3 cette fois. En fait, j'ai également été attiré par un message sur Weibo. Voyant que les résultats obtenus par d'autres étaient très bons, j'avais envie de le faire.
1. Diagramme de reproduction
Il ne semble pas très différent de l'effet obtenu avec JS dans le passé, mais le sentiment général est très élégant. Eh bien, la puissance de CSS3 est que j'ai écrit très peu de code pour obtenir des résultats plus complexes. Cependant, cet exemple a également quelque chose de pas parfait. Lorsque vous basculez entre deux images, s'il y a des images au milieu, vous le verrez toujours lors de l'exécution de l'animation CSS3, ce qui est moins puissant. Mais pensez-y, c'est l'effet obtenu par Pure CSS3. Les changements de structure HTML complexes implémentés à l'aide de JS ne peuvent pas être vus ici, donc l'effet ci-dessus est difficile à mettre en œuvre simplement avec CSS3.
2. Structure HTML
<div>
<entrée vérifiée type = "radio">
<input type = "radio">
<input type = "radio">
<input type = "radio">
<input type = "radio">
<div>
<div>
<div>
<Re article>
<div>
<h1> title1 </h1>
<a href = "#"> Description1 </a>
</div>
<img src = "img / pic1.png" />
</article>
<Re article>
<div>
<h1> title2 </h1>
<a href = "#"> Description2 </a>
</div>
<img src = "img / pic2.png" />
</article>
<Re article>
<div>
<h1> title3 </h1>
<a href = "#"> Description3 </a>
</div>
<img src = "img / pic3.png" />
</article>
<Re article>
<div>
<h1> title4 </h1>
<a href = "#"> Description4 </a>
</div>
<img src = "img / pic4.png" />
</article>
<Re article>
<div>
<h1> title5 </h1>
<a href = "#"> Description5 </a>
</div>
<img src = "img / pic5.png" />
</article>
</div>
</div>
</div>
<div>
<étiquette pour = "Slider1"> </ label>
<étiquette pour = "Slider2"> </ label>
<étiquette pour = "Slider3"> </ label>
<étiquette pour = "Slider4"> </ label>
<étiquette pour = "Slider5"> </ label>
</div>
<div>
<étiquette pour = "Slider1"> </ label>
<étiquette pour = "Slider2"> </ label>
<étiquette pour = "Slider3"> </ label>
<étiquette pour = "Slider4"> </ label>
<étiquette pour = "Slider5"> </ label>
</div>
</div>
Le code ci-dessus est la principale structure HTML, qui contient un groupe de radio d'entrée, que vous pouvez voir ici comme un centre, et il joue un rôle très critique dans cet exemple (c'est pourquoi je ne veux pas le cacher dans l'exemple, le vrai héros ne devrait pas être le héros dans les coulisses).
Les curseurs ci-dessous contiennent des images qui doivent être affichées. Ici, cela semble être l'effet d'une porte coulissante, qui affiche différentes images en contrôlant la marge intérieure-gauche.
Les commandes sont la flèche de commutation sur les côtés gauche et droit de l'image. Ne vous inquiétez pas, pourquoi avez-vous besoin de concevoir 5? Il semble que deux suffisent. Veuillez nous rappeler que dans cet exemple, nous n'utiliserons jamais JS pour atteindre la commutation.
Le dernier actif est le bouton de clic sous l'image. Vous pouvez sélectionner directement l'image que vous souhaitez parcourir en cliquant dessus. Vous pouvez également enrichir la structure à l'intérieur pour concevoir un effet miniature.
3. Fiche de style CSS
@Charset UTF-8;
/* commun */
corps {fond: #ddd; overflow-x: caché;}
#bd {largeur: 960px; marge: 100px auto; max-largeur: 960px;}
/ * Module: Sliders * /
#sliders {
Border-Radius: 5px;
Box-Shadow: 1PX 1PX 4PX # 666;
rembourrage: 1%;
Contexte: #FFFF;
}
#débordement{
Largeur: 100%;
débordement: caché;
}
#sliders .inner {
Largeur: 500%;
Transiton: Tous les 1 linéaires;
-Webkit-Transition: Tous 1s linéaire;
}
Article #sliders {
flottant: à gauche;
Largeur: 20%;
}
#sliders Article .info {
Position: absolue;
Opacité: 0;
rembourrage: 30px;
Couleur: # 666;
Font-Family: Arial;
Transition: opacité 0.1s facilité de sortie;
-Webkit-transform: tradlatez (0);
-Webkit-Transition: Opacity 0.1s Factive-Out;
}
#sliders Article .info H1 {
taille de police: 22px;
Police-poids: Bold;
marge: 0 0 5px;
}
#sliders Article .info a {
Couleur: # 666;
Décoration du texte: aucune;
}
/ * module: commandes * /
#Controls {
hauteur: 50px;
Largeur: 100%;
marge: -25%;
}
#Controls Label {
Affichage: aucun;
Largeur: 50px;
hauteur: 50px;
Opacité: 0,3;
curseur: pointeur;
}
#Controls Label: Hover {
Opacité: 1;
}
/ * Module: actif * /
#actif{
Largeur: 100%;
marge: 23%;
Texte-aligne: Centre;
}
# étiquette active {
Affichage: bloc en ligne;
Largeur: 10px;
hauteur: 10px;
Border-Radius: 5px;
Contexte: #BBB;
Color à la frontière: # 777;
}
# étiquette active: volant {
Contexte: #ccc;
}
/ * le style de changement vérifié d'entrée * /
# Slider1: Vérifié ~ #active Label: Nth-Child (1),
# Slider2: Vérifié ~ #active Label: Nth-Child (2),
# Slider3: Vérifié ~ #active Label: Nth-Child (3),
# Slider4: vérifié ~ #active Label: Nth-Child (4),
# Slider5: vérifié ~ #active Label: Nth-Child (5) {
Contexte: # 333;
}
# Slider1: Vérifié ~ #Controls Label: Nth-Child (5),
# Slider2: Vérifiez ~ #Controls Label: Nth-Child (1),
# Slider3: Vérifiez ~ #Controls Label: Nth-Child (2),
# Slider4: vérifié ~ #Controls Label: Nth-Child (3),
# Slider5: Vérifiez ~ #Controls Label: Nth-Child (4) {
Affichage: bloc;
flottant: à gauche;
CONTEXTE: URL (../ IMG / PREV.PNG) NO-REPEAT;
marge-gauche: -70px;
}
# Slider1: Vérifiez ~ #Controls Label: Nth-Child (2),
# Slider2: Vérifiez ~ #Controls Label: Nth-Child (3),
# Slider3: Vérifiez ~ #Controls Label: Nth-Child (4),
# Slider4: Vérifié ~ #Controls Label: Nth-Child (5),
# Slider5: Vérifié ~ #Controls Label: Nth-Child (1) {
Affichage: bloc;
flottant: à droite;
Contexte: URL (../ img / next.png) sans répétition;
marge-droite: -70px;
}
# Slider1: vérifié ~ #sliders Article: Nth-Child (1) .info,
# Slider2: vérifié ~ #sliders Article: Nth-Child (2) .info,
# Slider3: vérifié ~ #sliders Article: Nth-Child (3) .info,
# Slider4: vérifié ~ #sliders Article: Nth-Child (4) .info,
# Slider5: vérifié ~ #sliders Article: Nth-Child (5) .info {
Opacité: 1;
Transition: Tous les 0,6 s facilités 1S;
-Webkit-Transition: Tous les 0.6S Facteur 1S;
}
# Slider1: vérifié ~ #sliders .inner {
marge-gauche: 0;
}
# Slider2: vérifié ~ #sliders .inner {
marge-gauche: -100%;
}
# Slider3: vérifié ~ #sliders .inner {
marge-gauche: -200%;
}
# Slider4: vérifié ~ #sliders .inner {
marge-gauche: -300%;
}
# Slider5: vérifié ~ #sliders .inner {
marge-gauche: -400%;
}
OK, j'avoue que le code CSS ci-dessus est vraiment plus compliqué et compliqué, mais cela réalise vraiment un effet très éblouissant, et quand j'ai fini de l'écrire, j'ai également été impressionné par l'énorme magie de CSS3. . .
Le code de la première moitié de ceci est principalement utilisé pour concevoir la structure du curseur, y compris certains coins arrondis et conceptions d'embellissement de l'ombre. La seconde moitié contient principalement des effets d'animation pour réaliser des effets dynamiques lors de la commutation d'images ou de boutons de contrôle. Cependant, la chose la plus importante est l'utilisation du sélecteur CSS3 inférieur, qui réalise vraiment la fonction de la commutation d'image. Je pense vraiment que les sélecteurs jouent un rôle très, très important dans les exemples, car c'est ce que j'ai ignoré dans l'apprentissage du CSS3 dans le passé. Je pense toujours que ce qui est puissant à propos de CSS3, ce sont les coins arrondis, les ombres, les déformations et les animations, mais ce code nous dit vraiment à quel point le sélecteur est important dans CSS3. Dans une logique complexe, l'utilisation de ces sélecteurs CSS3 peut obtenir des effets inimaginables.
4. Le principe de la mise en œuvre des curseurs
Lorsque j'ai fini de lire le code ci-dessus, vous devez être le même qu'au début. Je ne crois pas qu'un tel code puisse réaliser l'effet du curseur.
Ok, permettez-moi d'analyser le principe de mise en œuvre.
Comme je l'ai dit ci-dessus, le premier groupe radio est très important et est le centre de la mise en œuvre des curseurs. Oui, c'est vraiment le cas.
Pour implémenter un curseur, il n'y a que deux types de commutation, c'est-à-dire lorsque vous cliquez sur le bouton de contrôle, l'image est commutée; En même temps, lors du changement de l'image, assurez-vous que tous les boutons de contrôle sont affichés correctement.
Dans cet exemple, nous utilisons l'étiquette comme bouton de commande, l'article contient l'image et l'inner comme le conteneur de l'image.
Il est difficile de penser simplement à y penser, l'étiquette et l'article ne peuvent pas être connectés, et les informations sur l'état de l'étiquette sont difficiles pour refléter le choix de l'article. À moins qu'il y ait quelque chose qui peut enregistrer l'état de commutation de l'étiquette, puis sélectionnez les images dans l'ordre correspondant pour l'afficher par certains moyens.
Eh bien, vous comprenez maintenant pourquoi ce groupe radio est la clé de la mise en œuvre du curseur. Oui, il semble enregistrer l'état de clic de l'étiquette.
Nous utilisons l'attribut de l'étiquette pour correspondre à la radio correspondante. Lorsque l'étiquette est cliquée, la radio correspondante est vérifiée. Ensuite, déplacez l'intérieur vers la gauche à travers le puissant sélecteur CSS3 pour afficher l'image correspondante. Bien sûr, les boutons de sélection gauche et droite correspondants sont également affichés via le sélecteur. De même, lorsque les boutons gauche et droit sont cliqués, l'état des 5 boutons de sélection ci-dessous est également réalisé de cette manière.
Le principe de mise en œuvre ci-dessus est relativement simple. En fait, tant que vous pouvez enregistrer l'état de clic du bouton de contrôle, vous pouvez réaliser l'effet du curseur via le sélecteur.
Non seulement les groupes de radio peuvent le faire, mais A: Hover peut également implémenter la commutation d'image lorsqu'il oscille selon cette idée. Bien sûr, il existe de nombreuses autres méthodes de mise en œuvre, tant que vous comprenez le principe de la mise en œuvre.
5. Résumé
En fait, CSS3 est vraiment amusant, avec de nombreux effets. Dans CSS3, il n'y a que des résultats inattendus, mais personne ne peut le faire. Parfois, je trouve vraiment que l'écriture de CSS3 nécessite un peu d'intelligence, et parfois certaines méthodes de mise en œuvre exquises sont vraiment louables.
Eh bien, en tant que petite pratique, cet exemple a gagné beaucoup, en particulier le sélecteur puissant, qui me fait honte que je l'ai ignoré dans le passé. . .
J'ai également besoin de considérer le problème de la commutation discontinue d'image. Il semble que je dois utiliser un petit JS pour aider.
Ok, partageons-le s'il y a un résultat.