はじめに
この実験では、Web ページの視覚的な外観を向上させるためのさまざまな CSS の概念と技術を探求します。実践的な演習を通じて、CSS ルールを作成および変更し、HTML 要素にスタイルを適用し、特定の要素を対象とする CSS セレクタを使用する方法を学びます。実験が終了するとき、CSS を使用して視覚的に魅力的で応答性の高い Web ページを作成する方法を十分に理解しているようになります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、Web ページの視覚的な外観を向上させるためのさまざまな CSS の概念と技術を探求します。実践的な演習を通じて、CSS ルールを作成および変更し、HTML 要素にスタイルを適用し、特定の要素を対象とする CSS セレクタを使用する方法を学びます。実験が終了するとき、CSS を使用して視覚的に魅力的で応答性の高い Web ページを作成する方法を十分に理解しているようになります。
VM には既に index.html
と style.css
が用意されています。
テキストの周りにホバー時にシャドウボックスを作成するには、次の手順に従います。
transform: perspective(1px)
を設定して、Z 平面とユーザーの間の距離に影響を与えることで要素に 3D 空間を与え、translateZ(0)
を使って 3D 空間内で p
要素を z 軸に沿って再配置します。box-shadow
を使ってボックスを透明にします。transition-property
プロパティを使って、box-shadow
と transform
の両方にトランジションを有効にします。:hover
、:active
、:focus
の疑似クラスセレクタを使って、新しい box-shadow
と transform: scale(1.2)
を適用してテキストのスケールを変更します。p
要素に hover-shadow-box-animation
クラスを追加します。以下が HTML コードです。
<p class="hover-shadow-box-animation">Box it!</p>
以下が CSS コードです。
.hover-shadow-box-animation {
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
margin: 10px;
transition:
box-shadow 0.3s,
transform 0.3s;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
transform: scale(1.2);
}
右下隅の「Go Live」をクリックして 8080 ポートで Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。
おめでとうございます!あなたはホバーシャドウボックスアニメーションの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。