Utilisez HTML5 CSS3 pour obtenir un effet de commutation de curseur Dites adieu aux compétences du didacticiel Javascript CSS_html5

Eh bien, la dernière fois, j'ai dit que je rattraperais quelques articles dès que possible, mais j'ai calmement raté le rendez-vous. Cela fait presque un mois que je n’ai pas posté d’article, ce qui est vraiment déprimant. Je trouve que je ne peux pas perdre de temps ces derniers temps. Soit je n'arrive pas à trouver un sujet approprié lorsque je suis libre, soit je ne peux pas gagner de temps lorsque j'ai un sujet enchevêtré. . J'ai donc décidé de résumer les points de connaissances sur les problèmes avec lesquels j'ai lutté pendant un certain temps, de les étudier un par un en profondeur lorsque j'ai du temps libre, puis de les organiser en articles et de les partager.

Entrons dans le vif du sujet. En ce qui concerne le curseur, dans le passé, CSS et JS ont été utilisés pour obtenir des effets de commutation associés. J'ai entendu dire que tout le monde discutait de la mise en œuvre de l'utilisation de HTML5 CSS3, mais je ne l'ai jamais implémenté moi-même. Ok, cette fois j'ai le temps de jouer avec CSS3. En fait, j'ai aussi été attiré par un message sur Weibo. J'ai vu les résultats étonnants obtenus par d'autres, puis j'ai eu envie de le faire moi-même.
1. Rendu

Cela n'a pas l'air 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 réside dans le fait que je peux obtenir des effets relativement complexes en écrivant très peu de code. Cependant, cet exemple n'est pas non plus parfait. Lors du basculement entre deux images, s'il y a une image au milieu, elle sera toujours visible lors de l'exécution de l'animation CSS3, ce qui est relativement inefficace. Mais réfléchissez-y, c'est un effet obtenu par du CSS3 pur. Les changements complexes de la structure HTML implémentés avec js ne sont pas visibles ici, donc l'effet ci-dessus est difficile à obtenir simplement avec du CSS3.
2. Structure HTML >

;

="sliders">

>

Titre1

Description1 /pic1.png"/>

< /article>

Titre2

Description2< /a>

Titre3

info">

Titre4< /h1>
Description4

Description5

article>

>
<étiquette pour="slider2">
<étiquette pour="slider3"> ="slider4">

<étiquette pour="slider1">
<étiquette pour="slider2">
<étiquette pour="slider3">< ;/étiquette>
<étiquette pour=" slider4">
<étiquette pour="slider5" >

Le code ci-dessus est la structure HTML principale, qui contient un groupe radio d'entrée. Vous pouvez le voir comme un hub ici. Dans cet exemple, il joue un rôle clé (c'est pourquoi je ne veux pas le masquer, le vrai héros ne devrait pas être celui qui se cache derrière la scène).
Les curseurs ci-dessous contiennent les images qui doivent être affichées. Cela semble être un effet de porte coulissante. Différentes images peuvent être affichées en contrôlant la marge gauche de l'intérieur.

Les contrôles sont les flèches de commutation sur les côtés gauche et droit de l'image. Ne vous inquiétez pas de la raison pour laquelle nous devons en concevoir 5. Il semble que seulement deux suffisent. utilisez js pour implémenter la commutation dans cet exemple.
Le dernier actif est le petit bouton de clic sous l'image. Vous pouvez directement sélectionner l'image que vous souhaitez parcourir en cliquant dessus. Vous pouvez également enrichir la structure à l'intérieur pour concevoir un effet vignette.
3. feuille de style CSS

Copier le code

Le code est le suivant :

@charset utf-8
/* common */
body{background: #ddd;overflow-x: caché;}
#bd{width: 960px;margin : 100px auto ;max-width : 960px;}
/* module : sliders */
#sliders{
border-radius : 5px
box-shadow : 1px 1px 4px #666 ; 🎜>remplissage : 1% ;
arrière-plan : #fff ;
}
#overflow{
largeur :
débordement : caché
}
#sliders . inner{
largeur : 500 % ;
transiton : tous les 1 linéaires ;
-webkit-transition : tous les 1 linéaires ;
}
article #sliders{
float : gauche
largeur : 20 % ;
}
#sliders article .info{
position : absolue ;
opacité : 0 ;
remplissage : 30px
couleur : #666 ; 🎜>font -family : Arial ;
transition : opacité 0,1 s facilitée ;
-webkit-transform : translateZ(0);
-webkit-transition : opacité 0,1s facilitée ; >}
#sliders article .info h1{
font-size : 22px;
font-weight : gras
marge : 0 0 5px
}
#sliders article . info a{
couleur : #666 ;
texte-décoration : aucune
}
/* module : contrôles */
#contrôles{
hauteur : 50px ; largeur : 100 % ;
marge supérieure : -25 % ;
étiquette #controls{
affichage : aucun
largeur : 50px
hauteur : 50px ; >opacité : 0,3 ;
curseur : pointeur ;
}
#controls label:hover{
opacité : 1
}
/* module : actif */
#; active{
width : 100 % ;
margin-top : 23 % ;
text-align : center ;
#active label{
display : inline-block ; 🎜>largeur : 10px ;
hauteur : 10px ;
rayon de la bordure : 5px ;
arrière-plan : #bbb ; :hover{
background : #ccc;
}
/* entrée vérifiée, changement de style */
#slider1:checked ~ #active label:nth-child(1),
#slider2 :checked ~ #active label:nth-child(2),
#slider3:checked ~ #active label:nth-child(3),
#slider4:checked ~ #active label:nth-child(4 ),
#slider5:checked ~ #active label:nth-child(5){
background: #333
}
#slider1:checked ~ #controls label:nth-child(5; ),
#slider2:checked ~ #controls label:nth-child(1),
#slider3:checked ~ #controls label:nth-child(2),
#slider4:checked ~ #controls label:nth -child(3),
#slider5:checked ~ #controls label:nth-child(4){
display: block;
float: left
background: url(. ./img /prev.png) no-repeat;
margin-left: -70px
}
#slider1:checked ~ #controls label:nth-child(2),
#slider2; :checked ~ #controls label:nth-child(3),
#slider3:checked ~ #controls label:nth-child(4),
#slider4:checked ~ #controls label:nth-child(5 ),
#slider5:checked ~ #controls label:nth-child(1){
display: block
float: right
background: url(../img/next.png ) non- répétition ;
margin-right : -70px ;
}
#slider1:checked ~ #sliders article:nth-child(1) .info,
#slider2:checked ~ #sliders article:nth -child(2) .info,
#slider3:checked ~ #sliders article:nth-child(3) .info,
#slider4:checked ~ #sliders article:nth-child(4) .info,
#slider5:checked ~ #sliders article:nth-child(5) .info{
opacité : 1 ;
transition : tous les 0,6 s facilitent la sortie 1s
-webkit- ; transition : tous les 0,6 secondes de sortie facile
}
#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 :
}
#slider5 : vérifié ~ #sliders .inner{
marge gauche : }


D'accord, j'avoue que le code CSS ci-dessus est vraiment long et compliqué, mais il produit vraiment un effet très cool, et quand j'ai fini de l'écrire, j'ai été impressionné par l'énorme magie du CSS3. . .
La première moitié du code ici est principalement utilisée pour concevoir la structure du slider, y compris quelques designs embellissants en termes de coins arrondis et d'ombres. La seconde moitié est principalement constituée d'effets d'animation permettant d'obtenir des effets dynamiques lors du changement d'image ou du changement de bouton de commande. Cependant, le plus important est l'utilisation du sélecteur CSS3 en bas, grâce auquel la fonction de commutation d'image est véritablement réalisée. Je pense vraiment que le sélecteur joue un rôle très, très important dans l'exemple, car c'est quelque chose que j'ai ignoré lors de l'apprentissage de CSS3 dans le passé. J'ai toujours pensé que la puissance de CSS3 réside dans les coins arrondis, les ombres, la déformation et l'animation, mais ce code nous montre vraiment à quel point les sélecteurs sont importants dans CSS3. Dans une logique complexe, l'utilisation de ces sélecteurs CSS3 peut produire des effets inimaginables.
4. Principes d'implémentation du slider
Lorsque vous lisez le code ci-dessus pour la première fois, vous devez être comme moi au début, ne croyant pas qu'un tel code puisse obtenir l'effet d'un slider.
D'accord, laissez-moi analyser le principe de mise en œuvre.
J'ai dit plus haut que le groupe de radio supérieur est très important et constitue la plaque tournante de la mise en œuvre des curseurs. Oui, c'est vraiment le cas.
Pour implémenter un curseur, il est nécessaire de réaliser deux types de commutation, c'est-à-dire que lorsque l'on clique sur le bouton de commande, l'image change en même temps, lorsque l'image change, tous les boutons de commande doivent être affichés correctement ; .
Dans cet exemple, nous utilisons label comme bouton de contrôle, article contient l'image et inner sert de conteneur pour l'image.
Pour faire simple, il n'existe aucun moyen d'établir un lien entre l'étiquette et l'article, et il est difficile que les informations sur le statut de l'étiquette se reflètent dans la sélection de l'article. À moins qu'il n'y ait quelque chose qui puisse enregistrer l'état de commutation de l'étiquette, puis utiliser certains moyens pour sélectionner les images dans l'ordre correspondant à afficher.
D'accord, maintenant vous comprenez pourquoi le groupe radio est la clé de la mise en œuvre du curseur. Oui, il semble enregistrer l'état du clic de l'étiquette.
Nous utilisons l'attribut for du label pour l'associer à la radio correspondante. Lorsque l'on clique sur le label, la radio correspondante devient cochée. Déplacez ensuite l'intérieur vers la gauche grâce au puissant sélecteur CSS3 pour afficher l'image correspondante. Bien entendu, les boutons de sélection gauche et droit correspondants sont également affichés via le sélecteur. De la même manière, lorsque vous cliquez sur les boutons gauche et droit, l'état des cinq boutons de sélection ci-dessous est également implémenté de cette manière.
Le principe de mise en œuvre ci-dessus est relativement simple. En fait, tant que l'état du clic du bouton de commande peut être enregistré, l'effet de curseur peut être obtenu via le sélecteur.
Non seulement le groupe radio peut être utilisé, mais a:hover peut également suivre cette idée pour réaliser un changement d'image lorsque a survole. Bien entendu, il existe de nombreuses autres façons de le mettre en œuvre, à condition que vous compreniez le principe de mise en œuvre.
5. Résumé
En fait, CSS3 est vraiment amusant, et il existe de nombreux effets qui ne peuvent pas être imaginés dans CSS3. Parfois, je trouve vraiment qu'écrire CSS3 nécessite un peu d'intelligence, et parfois certaines méthodes d'implémentation exquises sont vraiment étonnantes.
Eh bien, comme petite pratique, cet exemple m'a beaucoup apporté, notamment le sélecteur puissant, qui me fait honte de l'avoir trop ignoré par le passé. . .
Je dois encore réfléchir à la question du changement d'image discontinu. Il semble que je doive utiliser quelques js pour m'aider.
D'accord, je partagerai les résultats quand je les aurai.