Раздвижная дверь CSS Подробное объяснение раздвижной двери

На самом деле концепция раздвижных дверей CSS появилась несколько лет назад, но в последние годы о ней упоминают чаще. Но люди часто путают его с эффектом табуляции, особенно некоторые начинающие друзья, поэтому я напишу здесь подробное объяснение, надеясь, что оно окажется полезным.

Говоря об этом, раздвижные двери — это не сложная технология, а всего лишь техника CSS. Он использует наложение и скольжение фоновых изображений для достижения некоторых эффектов. Самый распространенный из них — навигация по закругленным углам. Мы можем представить два фона с закругленными углами, один слева и один справа, как две раздвижные двери. Они могут сдвигаться вместе и перекрываться, чтобы отображать меньше контента, или они могут сдвигаться друг к другу. другое Откройте, чтобы отобразить больше контента, как показано ниже:

В некоторых предыдущих уроках мне нравилось разрезать фоновое изображение на две части: одну широкую и одну узкую, для склейки. На самом деле, одного изображения достаточно.

Здесь мы используем только два тега «a» и «span». Стиль может определять три состояния, что можно назвать самым простым способом.