css3隠すショー

CSS3 Hide Show

CSS3 は最新の CSS 標準であり、より多くのスタイルの選択肢とコントロールを提供します。その 1 つは要素の非表示と表示のコントロールです。この記事では、CSS3 を使用して要素を非表示および表示する方法と、このテクニックがどのような利点があるかについて説明します。

CSS3 には、none、block、inline、および inline-block の 4 つの表示プロパティがあります。最も一般的に使用されるのは none と block です。 none は要素を完全に非表示にすることを意味し、block は要素を画面上のブロック内に表示することを意味します。

非表示と表示の効果を実現するには、これらの表示プロパティを CSS3 の他のプロパティと組み合わせて使用​​する必要があります。これらの効果をより効果的に実現できるいくつかのプロパティを次に示します。

display:none: 要素を完全に非表示にします。要素がこのプロパティに設定されている場合、その要素はページ上に表示されません。

display:block: 要素を画面上にブロック状に表示します。このプロパティは通常、非表示の要素を画面上に再表示するために使用されます。

visibility:hidden: 要素を非表示にしますが、要素が占有するスペースはまだ存在します。この属性は通常、ページ レイアウトの問題を回避するために元のレイアウトを維持する必要がある場合に使用されます。

visibility:visible: 要素を表示します。このプロパティは、要素を非表示にした後、再び表示できるようにします。

opacity:0: 要素を透明にして、要素を非表示にします。このプロパティは通常、スムージング/フェード効果が必要な場合に使用されます。

opacity:1: 透明度を通常の値 (1) にリセットすると、要素が再び表示され、他の要素も通常どおり表示されるようになります。

transition:all 0.5s easy: スタイル属性変更の遷移時間を 0.5 秒 (0.5 秒) に設定し、その遷移効果を「ease」に設定します。このプロパティは通常、スムーズな CSS トランジション効果を作成するために使用されます。

次に、例を使用して、上記のプロパティを使用して非表示効果と表示効果を実現する方法を示します。

まず、以下に示すように、display:none 属性を使用して要素を完全に非表示にします。

.hide-me{
    display:none;
}

これにより、クラス「hide-me」の要素が非表示になります。

次に、display:block または display:inline-block を使用して、次のようにその要素の表示を復元できます。

.show-me{
    display:block;
}

これにより、クラス "show-me" を持つ要素が削除されます。ブロックレベルの要素を取得して画面に戻します。

次に、visibility:hidden を使用して要素を非表示にできますが、以下に示すように、要素が占有するスペースはまだ存在します。

.hide-me{
    visibility:hidden;
}

これにより、クラス "hide-me" で要素が非表示になります。要素はそのままで、ページ レイアウト内で同じスペースを占有します。

次に、visibility:visible を使用して要素の非表示を終了し、次のように再表示します。

.show-me{
    visibility:visible;
}

これにより、クラス「show-me」の要素が再表示されます。ページに表示されます。

よりスムーズなトランジション効果が必要な場合は、次のように不透明度属性を使用できます:

.hide-me{
    opacity:0;
    transition:all 0.5s ease;
}

これにより、クラス「hide-me」の要素が透明に設定され、トランジション時間が設定されます。スタイル変更の時間を 0.5 秒 (0.5 秒) に変更し、トランジション効果を「イーズ」に設定します。

最後に、opacity:1 とtransition:all 0.5秒を使用すると、次のように非表示を終了して要素をユーザーに表示できます:

.show-me{
    opacity:1;
    transition:all 0.5s ease;
}

これにより、要素が「クラス」になります。 show-me」要素は不透明で、0.5 秒でスムーズにフェードアウトします。

概要:

CSS3 は、要素の非表示および表示効果をより適切に制御できるようにする一連のプロパティを提供します。通常、さまざまな属性はさまざまなアプリケーション シナリオに対応しており、これには Web デザイン、視覚効果デザイン、ユーザー エクスペリエンス デザインなどの側面が含まれる場合があります。 Web サイトや UI をよりインタラクティブで視覚的にする一方で、要素の非表示/表示の効果により、ほとんどの製品やサービスのデザイン機能を最適化できます。

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