CSS3 で虫眼鏡効果を模倣するいくつかの方法の原理の分析

記事のタイトルが「模造虫眼鏡」なのはなぜですか?
今日お話ししたいのは、一般的に言われているような、マウスを動かすと、その隣に大きなローカル画像がポップアップする、ということではありません。これは簡単に書けるし、多くのスキルも必要ありません（親要素（または：元の画像）を配置するには相対位置を使用し、ローカルの大きな画像（目的：元の画像の隣のどこかに配置する）を配置するには絶対位置を使用し、その横のスタイルを制御するには CSS を使用し、リッスンするにはマウスイベントを使用します...もちろん、jQuery でインターフェイスを直接使用することもできます - $('class name').jqzoom({zoomwidth:xx; zoomheight: xx; zoomType:'reverse';}) 最後の Type は虫眼鏡のタイプを定義します）

さて、本題に戻りましょう。今日お話ししたいのは、マウスを動かすと元の位置にある画像が拡大するアニメーションです！
そうです、アニメーションです。 （以下：ウェブサイトより抜粋）

最初に思い浮かんだのは、CSS3 の@keyframes 属性でした。これは、より頻繁に使用されるためです。
たとえば、 from...to を使用して、入場アニメーションと退場アニメーションのスタイルを指定できます。

たとえば、移行を通じてこれを達成できます（今日の焦点）

預言者: CSS3 属性 transform——(rotate: rotate、scale: scale、skew: skew、translate: translate)

例えば：
要素の通常の幅は 100 ピクセルですが、マウスがその上を通過すると幅が 200 ピクセルになります。
幅の値のみを設定した場合、効果は次のようになります。

すごく硬そうに見えませんか？トランジションを追加した場合の効果を見てみましょう。

2 つの効果の違いを確認した後、おそらく transition 属性の役割を理解できたと思います。この例の目的は幅の変更と似ていますが、最終的な効果は変わります。引き続き、以下の詳細なコードをご覧ください。

<div id="コンテナ">
  <img src="./little_boy.jpg" />
  <span>みなさんこんにちは！私は誰ですか？ </span>
</div>

＃容器 {
  マージン: 200px;
  位置: 相対的;
  幅: 300ピクセル;
  高さ: 300px;
  背景色: 緑黄色;
  遷移: transform .5s イーズアウト;
}

#コンテナ画像{
  幅: 100%;
  高さ: 100%;
}

#コンテナスパン{
  位置: 絶対;
  上: 0;
  左: 0;
  マージン: 6px;
  幅: 100%;
  高さ: 20px;
  行の高さ: 20px;
  フォントサイズ: 18px;
  色: 白;
  テキスト配置: 中央;
}

#コンテナ:ホバー{
  変換: スケール(1.3);
}

分析：
(1) コンテナに hover 疑似クラスを追加し、transform 属性を使用してコンテナの拡大効果を設定します。 (2) コンテナの transition 属性を設定し、属性値を transform にしてアニメーションの継続時間を設定します。

これで、CSS3 で虫眼鏡効果をシミュレートするいくつかの方法の原理と分析に関するこの記事は終了です。CSS3 虫眼鏡に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。