見事な CSS アニメーションで Web ページを強化する

はじめに

この実験では、Web ページの視覚的な外観を向上させるためのさまざまな CSS の概念と技術を探求します。実践的な演習を通じて、CSS ルールを作成および変更し、HTML 要素にスタイルを適用し、特定の要素を対象とする CSS セレクタを使用する方法を学びます。実験が終了するとき、CSS を使用して視覚的に魅力的で応答性の高い Web ページを作成する方法を十分に理解しているようになります。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transitions("Transitions") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} css/colors -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} css/box_model -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} css/margin_and_padding -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} css/display_property -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} css/pseudo_classes -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} css/animations -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} css/transitions -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} css/transformations -.-> lab-35214{{"ホバー時のシャドウボックスアニメーション"}} end

ホバー時のシャドウボックスアニメーション

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 でさらに多くの実験を練習することができます。