CSS3 を使用して動的な画像効果を実現_html/css_WEB-ITnose

1. CSS3 を使用する利点

1. 使いやすく、学習も簡単

2. 比較的最適化されたパフォーマンス

2. 学習前に知っておきたいこと

html5の基本文法

css3の基本的な使い方

3. ページ効果の表示

エフェクト画像表示

図に示すように (ここでは例としてオンライン書店システムを示します)、本 (中央の本) 上でマウスをスライドさせると、の画像が表示されます。本が拡大され、ラベルが左からスライドして本の価格、紹介文、著者などの情報が表示されます。マウスを離すと元の状態に戻ります。 （図のように左側と右側が初期状態、中央がマウスオーバー状態）

IV. 主な内容

1. 基本的な使い方をマスターする。 Figure と figcaption の

2. トランスフォームの基本的な属性と使い方に習熟する

3. トランジションとトランスフォームを通じて簡単なアニメーションを作成する

---

5.属性とそのコード

(1) Figure と figcaption (HTML)

figure タグ: コンテナなどの独立したコンテンツを指定するために使用され、画像、グラフ、写真などを保存するために使用されます。

figcaption タグ: と Figure を組み合わせて使用​​され、主に Figure タグのタイトルを定義するために使用されます。

(2)transformとtransition（CSS属性）

Transform：要素の変形処理（例：拡大、縮小、回転など）に使用 原理：位置を変更することで実現要素のパラメータ 要素の変換。

transition: 要素の遷移アニメーション処理に使用されます。 (アニメーションの時間や遅延などをパラメータ設定で制御します)

HTML ページ:

HTML の基本的な展開についてはここでは説明しません。

ページの分散をより合理的にしたい場合は、テーブル タグを作成し、ページをいくつかのモジュールに分割し、各モジュールに要素 (ここではブックに置き換えられます) を格納し、ここに図のコードを直接記述することができます。 。

テーブルのサブタグ 内に Figure タグを作成し、Figure に class="test1" を与え、画像のラベル情報を格納する figcaption を作成します。 (以下では例として私のプロジェクトを使用します)

「?」(画像アドレス: DW エディタを使用する場合は、これをお勧めします)画像を直接挿入するには、myeclipse の場合は、プロジェクト ディレクトリに画像を置き、インポートするアドレスを入力する必要があります)

🎜>

次のステップは CSS を記述することです。

パブリック クラスの作成

パブリック クラスの属性

(上記の属性はマイ ページに従って設定されます。実際の状況の変化に応じて参照してください）

タグ移動開始位置属性

Pタグを設定し、Pのアニメーションを実現します変換によるタグ (P ラベルは画面左側の -180px の位置から移動します (- は左を表します))

ラベル終了位置

このコードは以下を表します: アニメーションを実現した後、マウスをホバーします。 (ラベルが0pxへ、-180pxから0pxへ移動)

アニメーション移動時間

ラベルが-180pxからスライドする時間to 0px 遅延

画像の拡大と復元

最後のステップは、画像の拡大と復元を実現し、画像の属性を設定することです。そして、ホバー時にtransformを呼び出します:scale (1.5, 1.5)。これは、画像の長さと幅が1.5倍に拡大されることを示します。 (実際の状況に応じて調整してください)

6. まとめ

このチュートリアルを通じて、簡単な CSS3 を使用して画像を拡大/縮小したり、ラベルを移動したりする方法を学習できます。 JSでも実装できますが、コード量が多くなり、設定も複雑になります。この方法の方が簡単です。同時に、変形属性を変更することもできます。ズームインとズームアウトはスケールによって実現され、マウスが画像の上を通過したときに回転を使用して、より豪華な効果を作成することもできます。

---