CSS引き戸 引き戸詳細説明

実際、CSS スライド ドアの概念は数年前に登場しましたが、近年よく言及されるようになりました。しかし、人々、特に一部の初心者の友達がこれをタブ効果と混同することが多いため、役立つことを願ってここに詳細な説明を書きます。

そういえば、引き戸は高度な技術ではなく、単なるCSSの技術です。背景画像の重なりとスライドを使用して、いくつかの効果を実現します。最も一般的なのは、角の丸いナビゲーションです。左側と右側の 2 つの丸い角の背景は、スライドして重なって表示されるコンテンツが少なくなったり、それぞれに対してスライドしたりできると考えられます。以下に示すように、その他のコンテンツを表示します。

以前のいくつかのチュートリアルでは、背景画像を幅の広い部分と狭い部分の 2 つの部分に切り分けて結合することを好みました。実際には、1 つの画像で十分です。

ここでは、「a」と「span」の 2 つのタグのみを使用します。これは、最も単純な方法と言える 3 つの状態を定義できます。