Comentário: Quando se trata de controle deslizante, no passado, o CSS+JS tem sido usado para obter efeitos de comutação relacionados. Ouvi dizer que todo mundo está discutindo o método de implementação de usar o HTML5+CSS3, mas nunca o implementei. Ok, tenho tempo para jogar CSS3 desta vez. Amigos interessados podem aprender mais
Bem, da última vez que eu disse que adicionaria alguns artigos rapidamente, mas eu calmamente quebrei a consulta. Só foi publicado em mais um mês, o que é realmente deprimente. Descobri que sempre fui incapaz de encontrar tempo recentemente e basicamente organizei um projeto após o outro. Não consegui encontrar o tópico certo quando estava livre, ou não consegui encontrar tempo quando fiquei confuso. Por isso, decidi resumir os pontos de conhecimento dos problemas com os quais tenho lutado há um período de tempo e estudá -los um por um quando sou livre e depois organizá -los em artigos e compartilhá -los.A partir do tópico, quando você menciona o Slider, sempre usou o CSS+JS para alcançar efeitos de comutação relacionados. Ouvi dizer que todo mundo está discutindo o método de implementação de usar o HTML5+CSS3, mas nunca o implementei. Ok, tenho tempo para jogar CSS3 desta vez. Na verdade, eu também fui atraído por uma mensagem no Weibo. Vendo que os resultados alcançados por outros eram muito bons, tive o desejo de fazê -lo.
1. Diagrama de reprodução
Não parece muito diferente do efeito alcançado com JS no passado, mas o sentimento geral é muito elegante. Bem, o poder do CSS3 é que escrevi muito pouco código para obter resultados mais complexos. No entanto, este exemplo também tem algo não perfeito. Ao alternar entre duas fotos, se houver fotos no meio, você ainda a verá durante a execução da animação CSS3, que é menos poderosa. Mas pense bem, esse é o efeito alcançado pelo puro CSS3. As alterações complexas da estrutura HTML implementadas usando JS não podem ser vistas aqui; portanto, o efeito acima é difícil de implementar com o CSS3.
2. Estrutura HTML
<div>
<entrada verificada type = "radio">
<input type = "Radio">
<input type = "Radio">
<input type = "Radio">
<input type = "Radio">
<div>
<div>
<div>
<Artigo>
<div>
<H1> Title1 </h1>
<a href = "#"> description1 </a>
</div>
<img src = "img/pic1.png"/>
</artigo>
<Artigo>
<div>
<H1> title2 </h1>
<a href = "#"> description2 </a>
</div>
<img src = "img/pic2.png"/>
</artigo>
<Artigo>
<div>
<H1> title3 </h1>
<a href = "#"> description3 </a>
</div>
<img src = "img/pic3.png"/>
</artigo>
<Artigo>
<div>
<H1> title4 </h1>
<a href = "#"> description4 </a>
</div>
<img src = "img/pic4.png"/>
</artigo>
<Artigo>
<div>
<H1> Title5 </h1>
<a href = "#"> description5 </a>
</div>
<img src = "img/pic5.png"/>
</artigo>
</div>
</div>
</div>
<div>
<Label para = "slider1"> </elabel>
<Label para = "slider2"> </elabel>
<Label para = "slider3"> </elabel>
<Label para = "slider4"> </elabel>
<Label para = "slider5"> </elabel>
</div>
<div>
<Label para = "slider1"> </elabel>
<Label para = "slider2"> </elabel>
<Label para = "slider3"> </elabel>
<Label para = "slider4"> </elabel>
<Label para = "slider5"> </elabel>
</div>
</div>
O código acima é a principal estrutura HTML, que contém um grupo de rádio de entrada, que você pode ver aqui como um hub, e desempenha um papel muito crítico neste exemplo (é por isso que não quero escondê -lo no exemplo, o verdadeiro herói não deve ser o herói nos bastidores).
Os controles deslizantes abaixo contêm imagens que precisam ser exibidas. Aqui parece ser o efeito de uma porta deslizante, que exibe imagens diferentes, controlando a margem interna.
Controles são a seta de comutação nos lados esquerdo e direito da figura. Não se preocupe, por que você precisa projetar 5? Parece apenas que dois são suficientes. Lembre -nos de que, neste exemplo, nunca usaremos o JS para alcançar a comutação.
O último ativo é o botão Clique abaixo da imagem. Você pode selecionar diretamente a imagem que deseja navegar clicando nela. Você também pode enriquecer a estrutura dentro para projetar um efeito de miniatura.
3. Folha de estilo CSS
@Charset UTF-8;
/* comum */
corpo {background: #ddd; overflow-x: hidden;}
#bd {width: 960px; margem: 100px Auto; max-lar: 960px;}
/ * Módulo: Sliders */
#sliders {
Radio de fronteira: 5px;
Shadow de caixa: 1px 1px 4px #666;
preenchimento: 1%;
Antecedentes: #ffff;
}
#Overflow {
largura: 100%;
estouro: oculto;
}
#sliders .inner {
largura: 500%;
Transiton: todos os 1s lineares;
-Webkit-transição: todos os 1s lineares;
}
#sliders Artigo {
flutuar: esquerda;
largura: 20%;
}
#sliders Artigo .info {
Posição: Absoluto;
opacidade: 0;
preenchimento: 30px;
Cor: #666;
Fonte-família: Arial;
Transição: Opacity 0.1s facilidade;
-webkit-transform: translatez (0);
-Webkit-transição: opacidade 0.1s facilidade;
}
#sliders Artigo .info H1 {
Size da fonte: 22px;
Peso da fonte: negrito;
margem: 0 0 5px;
}
#sliders artigo .info a {
Cor: #666;
Decoração de texto: Nenhum;
}
/ * Módulo: Controles */
#Controls {
Altura: 50px;
largura: 100%;
margin -top: -25%;
}
rótulo #Controls {
Exibir: Nenhum;
Largura: 50px;
Altura: 50px;
Opacidade: 0,3;
Cursor: Ponteiro;
}
#Controls Rótulo: Hover {
opacidade: 1;
}
/ * Módulo: ativo */
#Active {
largura: 100%;
margin-top: 23%;
Alinhamento de texto: centro;
}
rótulo #Active {
Exibição: bloco embutido;
Largura: 10px;
Altura: 10px;
Radio de fronteira: 5px;
Antecedentes: #bbb;
cor de fronteira: #777;
}
#LabelActive: Hover {
Antecedentes: #ccc;
}
/ * Entrada Verificada Alterar estilo */
#slider1: verificado ~ #Active Rótulo: NTH-Child (1),
#slider2: verificado ~ #Active Rótulo: NTH-Child (2),
#slider3: verificado ~ #Active Rótulo: NTH-Child (3),
#slider4: verificado ~ #Active Rótulo: NTH-Child (4),
#slider5: verificado ~ #Active Rótulo: NTH-Child (5) {
Antecedentes: #333;
}
#slider1: verificado ~ #Controls Rótulo: NTH-Child (5),
#slider2: verificado ~ #Controls Rótulo: NTH-Child (1),
#slider3: marcada ~ #Controls Rótulo: NTH-Child (2),
#slider4: verificado ~ #Controls Rótulo: NTH-Child (3),
#slider5: verificado ~ #Controls Rótulo: NTH-Child (4) {
exibição: bloco;
flutuar: esquerda;
Antecedentes: URL (../ img/prev.png) sem repetição;
margem -esquerda: -70px;
}
#slider1: verificado ~ #Controls Rótulo: NTH-Child (2),
#slider2: verificado ~ #Controls Rótulo: NTH-Child (3),
#slider3: verificado ~ #Controls Rótulo: NTH-Child (4),
#slider4: marcada ~ #Controls Rótulo: NTH-Child (5),
#slider5: verificado ~ #Controls Rótulo: NTH-Child (1) {
exibição: bloco;
Float: Certo;
Antecedentes: URL (../ img/next.png) sem repetição;
Margem -direita: -70px;
}
#slider1: verificado ~ #sliders Artigo: NTH-Child (1) .info,
#slider2: verificado ~ #sliders Artigo: NTH-Child (2) .info,
#slider3: verificado ~ #sliders Artigo: NTH-Child (3) .info,
#slider4: verificado ~ #sliders Artigo: NTH-Child (4) .info,
#slider5: verificado ~ #sliders Artigo: NTH-Child (5) .info {
opacidade: 1;
Transição: todos os 0.6s facilitam 1s;
-Webkit-transição: todos os 0.6s facilitam 1s;
}
#slider1: verificado ~ #sliders .inner {
margem-esquerda: 0;
}
#slider2: verificado ~ #sliders .inner {
margem -esquerda: -100%;
}
#slider3: verificado ~ #sliders .inner {
margem -esquerda: -200%;
}
#slider4: verificado ~ #sliders .inner {
margem -esquerda: -300%;
}
#slider5: verificado ~ #sliders .inner {
margem -esquerda: -400%;
}
OK, admito que o código CSS acima é realmente mais complicado e complicado, mas realmente alcança um efeito muito deslumbrante e, quando terminei de escrevê -lo, também fiquei impressionado com a enorme magia do CSS3. . .
O código na primeira metade disso é usado principalmente para projetar a estrutura do controle deslizante, incluindo alguns cantos arredondados e projetos de embelezamento de sombras. A segunda metade contém principalmente alguns efeitos de animação para obter alguns efeitos dinâmicos ao alterar imagens ou botões de controle. No entanto, o mais importante é o uso do seletor CSS3 inferior, que realmente realiza a função da comutação de imagem. Eu realmente acho que os seletores desempenham um papel muito, muito importante nos exemplos, porque é isso que eu ignorei no aprendizado de CSS3 no passado. Eu sempre acho que o que é poderoso no CSS3 são cantos, sombras, deformações e animações arredondadas, mas esse código realmente nos diz o quão importante é o seletor no CSS3. Em alguma lógica complexa, o uso desses seletores CSS3 pode obter efeitos inimagináveis.
4. O princípio da implementação do controle deslizante
Quando terminei de ler o código acima, você deve ser o mesmo que eu no início. Não acredito que esse código possa atingir o efeito do controle deslizante.
OK, deixe -me analisar o princípio da implementação.
Como eu disse acima, o principal grupo de rádio é muito importante e é o centro da implementação do controle deslizante. Sim, realmente é.
Para implementar um controle deslizante, existem apenas dois tipos de comutação, ou seja, ao clicar no botão de controle, a imagem é alterada; Ao mesmo tempo, ao alternar a imagem, verifique se todos os botões de controle são exibidos corretamente.
Neste exemplo, usamos o rótulo como o botão de controle, o artigo contém a imagem e o interno como o contêiner da imagem.
Só de pensar nisso simplesmente, a etiqueta e o artigo não podem ser conectados, e é difícil refletir as informações de status do rótulo de refletir a escolha do artigo. A menos que haja algo que possa gravar o estado de comutação do rótulo e selecione as imagens na ordem correspondente para exibi -la por alguns meios.
Bem, agora você entende por que esse grupo de rádio é a chave para a implementação do controle deslizante. Sim, parece gravar o status de clique do rótulo.
Usamos o rótulo para atributos para corresponder ao rádio correspondente. Quando a etiqueta é clicada, o rádio correspondente é verificado. Em seguida, mova o interior para a esquerda pelo poderoso seletor CSS3 para exibir a imagem correspondente. Obviamente, os botões de seleção esquerda e direita correspondentes também são exibidos através do seletor. Da mesma forma, quando os botões esquerdo e direito são clicados, o status dos 5 botões de seleção abaixo também é realizado dessa maneira.
O princípio de implementação acima é relativamente simples. De fato, desde que você possa gravar o status de clique do botão de controle, poderá obter o efeito deslizante através do seletor.
Não apenas os grupos de rádio podem fazê -lo, a: o mouse também pode implementar a comutação de imagens quando um mouse de acordo com essa ideia. Obviamente, existem muitos outros métodos de implementação, desde que você entenda o princípio da implementação.
5. Resumo
De fato, o CSS3 é realmente divertido, com muitos efeitos. No CSS3, existem apenas resultados inesperados, mas ninguém pode fazê -lo. Às vezes, acho que escrever CSS3 requer um pouco de inteligência e, às vezes, alguns métodos de implementação requintados são realmente louváveis.
Bem, como uma pequena prática, este exemplo ganhou muito, especialmente o seletor poderoso, o que me deixa envergonhado por ter ignorado no passado. . .
Eu também preciso considerar a questão da comutação de imagem descontínua. Parece que tenho que usar um pouco de JS para ajudar.
OK, vamos compartilhar se houver um resultado.