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

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 92%です。学習者から 100% の好評価を得ています。

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

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