Comentario: Cuando se trata de Slider, en el pasado, CSS+JS se ha utilizado para lograr efectos de conmutación relacionados. He oído que todos han estado discutiendo el método de implementación para usar HTML5+CSS3, pero nunca lo he implementado yo mismo. Ok, tengo tiempo para jugar CSS3 esta vez. Los amigos interesados pueden aprender más
Bueno, la última vez que dije que agregaría algunos artículos rápidamente, pero con calma rompí la cita. Solo se ha publicado en otro mes, lo cual es realmente deprimente. Descubrí que siempre no he podido encontrar tiempo recientemente, y básicamente arreglé un proyecto tras otro. O no pude encontrar el tema correcto cuando era libre, o no pude encontrar tiempo cuando estaba confundido. Así que decidí resumir los puntos de conocimiento de los problemas con los que he estado luchando durante un período de tiempo, y estudiarlos uno por uno cuando estoy libre, y luego organizarlos en artículos y compartirlos.A partir del tema, cuando menciona Slider, siempre ha usado CSS+JS para lograr efectos de conmutación relacionados. He oído que todos han estado discutiendo el método de implementación para usar HTML5+CSS3, pero nunca lo he implementado yo mismo. Ok, tengo tiempo para jugar CSS3 esta vez. De hecho, también me atrajo un mensaje sobre Weibo. Al ver que los resultados logrados por otros fueron muy buenos, tuve la necesidad de hacerlo.
1. Diagrama de reproducción
No parece muy diferente del efecto logrado con JS en el pasado, pero la sensación general es muy elegante. Bueno, el poder de CSS3 es que he escrito muy poco código para lograr resultados más complejos. Sin embargo, este ejemplo también tiene algo que no es perfecto. Al cambiar entre dos imágenes, si hay imágenes en el medio, aún lo verá durante la ejecución de la animación CSS3, que es menos potente. Pero piénselo, este es el efecto logrado por CSS3 puro. Los complejos cambios de estructura HTML implementados usando JS no se pueden ver aquí, por lo que el efecto anterior es difícil de implementar con CSS3.
2. Estructura HTML
<div>
<type marcado de entrada = "radio">
<input type = "radio">
<input type = "radio">
<input type = "radio">
<input type = "radio">
<div>
<div>
<div>
<Artículo>
<div>
<h1> title1 </h1>
<a href = "#"> Descripción1 </a>
</div>
<img src = "img/pic1.png"/>
</artículo>
<Artículo>
<div>
<h1> title2 </h1>
<a href = "#"> Descripción2 </a>
</div>
<img src = "img/pic2.png"/>
</artículo>
<Artículo>
<div>
<h1> title3 </h1>
<a href = "#"> Descripción3 </a>
</div>
<img src = "img/pic3.png"/>
</artículo>
<Artículo>
<div>
<h1> title4 </h1>
<a href = "#"> Descripción4 </a>
</div>
<img src = "img/pic4.png"/>
</artículo>
<Artículo>
<div>
<h1> title5 </h1>
<a href = "#"> Descripción5 </a>
</div>
<img src = "img/pic5.png"/>
</artículo>
</div>
</div>
</div>
<div>
<etiqueta for = "slider1"> </selt>
<etiqueta for = "slider2"> </selt>
<etiqueta for = "slider3"> </selt>
<etiqueta for = "slider4"> </selt>
<etiqueta for = "slider5"> </selt>
</div>
<div>
<etiqueta for = "slider1"> </selt>
<etiqueta for = "slider2"> </selt>
<etiqueta for = "slider3"> </selt>
<etiqueta for = "slider4"> </selt>
<etiqueta for = "slider5"> </selt>
</div>
</div>
El código anterior es la estructura HTML principal, que contiene un grupo de radio de entrada, que puede ver aquí como un centro, y juega un papel muy crítico en este ejemplo (es por eso que no quiero ocultarlo en el ejemplo, el verdadero héroe no debería ser el héroe detrás de las escenas).
Los controles deslizantes a continuación contienen imágenes que deben mostrarse. Aquí parece ser el efecto de una puerta corredera, que muestra diferentes imágenes controlando el margen interno de la izquierda.
Controls es la flecha de conmutación en los lados izquierdo y derecho de la imagen. No te preocupes, ¿por qué necesitas diseñar 5? Solo parece que dos son suficientes. Recuerde que en este ejemplo, nunca usaremos JS para lograr el cambio.
El último activo es el botón de clic debajo de la imagen. Puede seleccionar directamente la imagen que desea navegar haciendo clic en él. También puede enriquecer la estructura en el interior para diseñar un efecto de miniatura.
3. Hoja de estilo CSS
@CharSet UTF-8;
/* común */
cuerpo {fondo: #ddd; overflow-x: Hidden;}
#bd {ancho: 960px; margen: 100px automático; max-width: 960px;}
/ * módulo: controles deslizantes */
#Sliders {
Border-Radius: 5px;
Shadow de caja: 1px 1px 4px #666;
relleno: 1%;
Antecedentes: #ffff;
}
#rebosar{
Ancho: 100%;
desbordamiento: oculto;
}
#Sliders .inner {
Ancho: 500%;
Transiton: todos 1s lineal;
-WebKit-Transition: todos 1s lineal;
}
##Sliders Artículo {
flotante: izquierda;
Ancho: 20%;
}
#sliders Artículo .info {
Posición: Absoluto;
Opacidad: 0;
relleno: 30px;
Color: #666;
Font-Family: Arial;
Transición: Opacidad 0.1 Facilización;
-webkit-transform: traducez (0);
-WebKit-Transition: Opacidad 0.1 Facilizante;
}
#sliders Artículo .info H1 {
tamaño de fuente: 22px;
Font-Weight: Bold;
margen: 0 0 5px;
}
#sliders Artículo .info A {
Color: #666;
Decoración de texto: ninguna;
}
/ * módulo: controles */
#controls {
Altura: 50px;
Ancho: 100%;
margen -top: -25%;
}
Etiqueta #controls {
Pantalla: ninguno;
Ancho: 50px;
Altura: 50px;
Opacidad: 0.3;
cursor: puntero;
}
#Controls Etiqueta: Hover {
Opacidad: 1;
}
/ * módulo: activo */
#activo{
Ancho: 100%;
margen-top: 23%;
Text-Align: Center;
}
#Etiqueta Activa {
Pantalla: bloque en línea;
Ancho: 10px;
Altura: 10px;
Border-Radius: 5px;
Antecedentes: #BBB;
Color de la frontera: #777;
}
#Etiqueta Activa: Hover {
Antecedentes: #ccc;
}
/ * Estilo de cambio de entrada marcado */
#Slider1: marcado ~ #ACTIVE Etiqueta: NTH-Child (1),
#Slider2: marcado ~ #ACTIVE Etiqueta: NTH-Child (2),
#Slider3: marcado ~ #ACTIVE Etiqueta: Nth-Child (3),
#Slider4: marcado ~ #ACTIVE Etiqueta: NTH-Child (4),
#Slider5: marcado ~ #Active Etiqueta: NTH-Child (5) {
Antecedentes: #333;
}
#Slider1: marcado ~ #controls etiqueta: nth-child (5),
#Slider2: marcado ~ #controls etiqueta: nth-child (1),
#Slider3: marcado ~ #controls etiqueta: nth-child (2),
#Slider4: marcado ~ #controls etiqueta: nth-child (3),
#Slider5: marcado ~ #controls etiqueta: nth-child (4) {
Pantalla: bloque;
flotante: izquierda;
Antecedentes: URL (../ img/prev.png) No-repeat;
margen -izquierda: -70px;
}
#Slider1: marcado ~ #controls etiqueta: nth-child (2),
#Slider2: marcado ~ #controls etiqueta: nth-child (3),
#Slider3: marcado ~ #controls etiqueta: nth-child (4),
#Slider4: marcado ~ #controls etiqueta: nth-child (5),
#Slider5: marcado ~ #controls etiqueta: nth-child (1) {
Pantalla: bloque;
flotante: correcto;
Antecedentes: URL (../ img/next.png) No-repeat;
margen -derecha: -70px;
}
#Slider1: Checked ~ #Sliders Artículo: Nth-Child (1) .info,
#Slider2: Checked ~ #Sliders Artículo: Nth-Child (2) .info,
#Slider3: Checked ~ #Sliders Artículo: Nth-Child (3) .info,
#Slider4: Checked ~ #Sliders Artículo: Nth-Child (4) .info,
#Slider5: Checked ~ #Sliders Artículo: nth-child (5) .info {
Opacidad: 1;
Transición: todos los 0.6 aliviados 1s;
-WebKit-Transition: todos los 0.6 aliviados 1s;
}
#Slider1: marcado ~ #sliders .inner {
margen-izquierda: 0;
}
#Slider2: Checked ~ #Sliders .inner {
margen izquierda: -100%;
}
#Slider3: Checked ~ #Sliders .inner {
margen -izquierda: -200%;
}
#Slider4: Checked ~ #Sliders .inner {
margen izquierda: -300%;
}
#Slider5: marcado ~ #sliders .inner {
margen -izquierda: -400%;
}
Ok, admito que el código CSS anterior es realmente más complicado y complicado, pero realmente logra un efecto muy deslumbrante, y cuando terminé de escribirlo, también me impresionó la enorme magia de CSS3. . .
El código en la primera mitad de esto se utiliza principalmente para diseñar la estructura del control deslizante, incluidos algunos esquinas redondeadas y diseños de embellecimiento de sombras. La segunda mitad contiene principalmente algunos efectos de animación para realizar algunos efectos dinámicos al cambiar de imágenes o controlar botones. Sin embargo, lo más importante es el uso del selector CSS3 inferior, que realmente se da cuenta de la función del cambio de imagen. Realmente creo que los selectores juegan un papel muy, muy importante en los ejemplos, porque esto es lo que he ignorado en el aprendizaje de CSS3 en el pasado. Siempre pienso que lo poderoso de CSS3 son las esquinas redondeadas, las sombras, las deformaciones y las animaciones, pero este código realmente nos dice cuán importante es el selector en CSS3. En alguna lógica compleja, el uso de estos selectores CSS3 puede lograr efectos inimaginables.
4. El principio de la implementación del control deslizante
Cuando terminé de leer el código anterior, debes ser el mismo que yo al principio. No creo que dicho código pueda lograr el efecto de Slider.
Ok, déjame analizar el principio de implementación.
Como dije anteriormente, el grupo de radio superior es muy importante y es el centro de la implementación de los controles deslizantes. Sí, realmente lo es.
Para implementar un control deslizante, solo hay dos tipos de conmutación, es decir, al hacer clic en el botón de control, se cambia la imagen; Al mismo tiempo, al cambiar la imagen, asegúrese de que todos los botones de control se muestren correctamente.
En este ejemplo, usamos la etiqueta como botón de control, el artículo contiene la imagen y el interior como el contenedor de la imagen.
Solo pensar en ello simplemente, la etiqueta y el artículo no pueden conectarse, y la información del estado de la etiqueta es difícil de reflejar la elección del artículo. A menos que haya algo que pueda registrar el estado de conmutación de la etiqueta, y luego seleccione las imágenes en el orden correspondiente para mostrarlo a través de algunos medios.
Bueno, ahora entiendes por qué ese grupo de radio es la clave para implementar el control deslizante. Sí, parece grabar el estado de clic de la etiqueta.
Utilizamos las etiquetas para el atributo para corresponder a la radio correspondiente. Cuando se hace clic en la etiqueta, la radio correspondiente se verifica. Luego mueva el interior a la izquierda a través del poderoso selector CSS3 para mostrar la imagen correspondiente. Por supuesto, los botones de selección izquierdo y derecho correspondientes también se muestran a través del selector. Del mismo modo, cuando se hace clic en los botones izquierdo y derecho, el estado de los 5 botones de selección a continuación también se realiza de esta manera.
El principio de implementación anterior es relativamente simple. De hecho, siempre que pueda registrar el estado de clic del botón de control, puede lograr el efecto deslizante a través del selector.
No solo los grupos de radio pueden hacerlo, A: Hover también puede implementar el cambio de imagen cuando se desplaza de acuerdo con esta idea. Por supuesto, hay muchos otros métodos de implementación, siempre que comprenda el principio de implementación.
5. Resumen
De hecho, CSS3 es muy divertido, con muchos efectos. En CSS3, solo hay resultados inesperados, pero no imposibles. A veces realmente encuentro que escribir CSS3 requiere un poco de inteligencia, y a veces algunos métodos de implementación exquisitos son realmente dignos de elogio.
Bueno, como una pequeña práctica, este ejemplo ha ganado mucho, especialmente el poderoso selector, lo que me avergüenza de haberlo ignorado en el pasado. . .
También necesito considerar el problema del cambio de imagen discontinuo. Parece que tengo que usar un pequeño JS para ayudar.
Ok, compartimos si hay un resultado.