Porta deslizante CSS Explicação detalhada da porta deslizante

Na verdade, o conceito de portas deslizantes CSS surgiu há alguns anos, mas tem sido mencionado com mais frequência nos últimos anos. Mas as pessoas muitas vezes confundem isso com o efeito de guia, especialmente alguns amigos novatos, então escreverei uma explicação detalhada aqui, esperando que seja útil.

Falando nisso, portas de correr não são uma tecnologia sofisticada, são apenas uma técnica CSS. Ele usa a sobreposição e o deslizamento de imagens de fundo para obter alguns efeitos. O mais comum é a navegação com cantos arredondados. Podemos imaginar os dois fundos de cantos arredondados, um à esquerda e outro à direita, como duas portas deslizantes. Eles podem deslizar juntos e se sobrepor para exibir menos conteúdo, ou podem deslizar um contra o outro. outro Abra para exibir mais conteúdo, conforme mostrado abaixo:

Em alguns tutoriais anteriores, gostei de cortar a imagem de fundo em duas partes, uma larga e outra estreita, para emendar. Na verdade, uma imagem é suficiente.

Aqui usamos apenas as duas tags "a" e "span". O estilo pode definir três estados, que pode ser considerado a maneira mais simples.