Puerta corredera CSS Explicación detallada de la puerta corredera

De hecho, el concepto de puertas correderas CSS apareció hace unos años, pero se ha mencionado con más frecuencia en los últimos años. Pero la gente suele confundirlo con el efecto pestaña, especialmente algunos amigos novatos, por lo que escribiré una explicación detallada aquí, con la esperanza de que sea útil.

Hablando de eso, las puertas correderas no son una tecnología sofisticada, son sólo una técnica CSS. Utiliza la superposición y el deslizamiento de imágenes de fondo para lograr algunos efectos. El más común es la navegación con esquinas redondeadas. Podemos imaginar los dos fondos con esquinas redondeadas, uno a la izquierda y otro a la derecha, como dos puertas correderas que pueden deslizarse juntas y superponerse para mostrar menos contenido, o pueden deslizarse una contra otra. otro Abrir para mostrar más contenido, como se muestra a continuación:

En algunos tutoriales anteriores, me gustaba cortar la imagen de fondo en dos partes, una ancha y otra estrecha, para unir. De hecho, una imagen es suficiente.

Aquí, solo usamos las dos etiquetas "a" y "span". El estilo puede definir tres estados, que se puede decir que es la forma más sencilla.