CSS sliding door Sliding door detailed explanation

In fact, the concept of CSS sliding doors has appeared a few years ago, but it has been mentioned more often in recent years. But people often confuse it with the tab effect, especially some novice friends, so I will write a detailed explanation here, hoping it will be helpful.

Speaking of which, sliding doors are not a sophisticated technology, they are just a CSS technique. It uses the overlap and sliding of background images to achieve some effects. The most common one is rounded corner navigation. We can imagine the two rounded corner backgrounds, one on the left and one on the right, as two sliding doors. They can slide together and overlap to display less content, or they can slide against each other. Open to display more content, as shown below:

In some previous tutorials, I liked to cut the background image into two parts, one wide and one narrow, for splicing. In fact, one image is enough.

Here, we only use the two tags "a" and "span". The style can define three states, which can be said to be the simplest way.