css3 表示 非表示

CSS3 は最新の CSS 仕様であり、Web デザインの効果をよりカラフルにします。よく使用される機能の 1 つは、表示と非表示です。

CSS3 には表示と非表示を実装するためのさまざまな方法があり、以下で紹介します。

1. 表示属性を使用する

表示属性は、次のような要素の表示状態を制御できます:

• none: スペースをとらずに要素を非表示にします。ページ上にあります。
• block: 要素をブロック要素として表示します。
• inline: 要素をインライン要素として表示します。
• inline-block: 要素をインライン ブロック要素として表示します。

display 属性の値を変更することで、要素の表示・非表示を切り替えることができます。たとえば、次のコードでは、要素の上にマウスを置くと画像が表示されます。

img {
  display: none;
}

div:hover img {
  display: block;
}

上記のコードでは、画像の初期表示プロパティは none、つまり非表示に設定されています。次に、div:hover img を介して、div 要素の上にマウスを置いたときに、画像の表示属性を block に設定して表示します。

2. 可視性属性を使用する

可視性属性は、要素の可視性を制御します。表示属性とは異なり、可視性属性を非表示に設定しても、ページ上のスペースを占有します。その値は次のとおりです。

• visible: 要素は表示されます。
• hidden: 要素は表示されませんが、それでもページ領域を占有します。

次のコードは、要素の上にマウスを置いたときのテキスト コンテンツの表示を実装します。

div {
  visibility: hidden;
}

div:hover {
  visibility: visible;
}

上記のコードでは、div 要素の初期可視属性は次のように設定されています。隠れた、つまり隠れて立ち上がる。次に、div:hover を使用して、div 要素の上にマウスを置くと、要素の Visibility 属性がvisible に設定され、要素が表示されます。

3. 不透明度属性を使用する

不透明度属性は要素の透明度を制御します。値の範囲は 0 ～ 1 で、0 は完全に透明、1 は完全に不透明を意味します。要素の不透明度属性値を変更することで、要素の表示・非表示を切り替えることができます。たとえば、次のコードは、要素の上にマウスを置いたときに要素がフェードインおよびフェードアウトする効果を実装します。

div {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

div:hover {
  opacity: 1;
}

上記のコードでは、div 要素の初期の不透明度属性は 0 に設定されています。それは完全に透明です。次に、div:hover を介して、マウスが div 要素上にあるときに、要素の不透明度プロパティを完全に不透明な 1 に設定します。同時に、フェードインおよびフェードアウト効果を実現するためにトランジション属性が追加されます。

上記は CSS3 を使用して表示と非表示を行ういくつかの方法であり、必要に応じて選択できます。 CSS3 は一部の古いバージョンのブラウザーと互換性がないため、コードを記述する際には互換性の問題を考慮する必要があることに注意してください。

以上がcss3 表示 非表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。