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

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 を応援していただければ幸いです。

<<:  HTML でよく使われるタグの概要 (必読)

>>:  Vue+ElementUI はページング関数を実装します - mysql データ

推薦する

Linux userdel コマンドの使用法

1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...

ティックアニメーション効果を作成するための svg+css または js

以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baid...

純粋な CSS カスタム複数行省略記号の問題 (原理から実装まで)

テキストオーバーフローを表示するにはどうすればいいですか? どのようなニーズがありますか?単一行です...

Windows Server 2016 リモート デスクトップ サービスを展開するためのクイック スタート ガイド

現在、2016サーバーは、win2008や2012よりも優れたマルチサイトhttpsサービスをサポー...

Linux での mysql8.018 のインストールと設定のプロセスの詳細な説明

Windowsでのインストールの紹介:こちらもご覧ください –》WindowsでのMySQL 8.0...

MySQL システム ユーザーが開くことができるファイルの最大数に関する簡単な説明

本から学ぶことは常に浅はかで、これがさらなるダウンタイムを引き起こすことには決して気づきません......

Linux で特定のユーザーにフォルダーのすべてのコンテンツを許可するにはどうすればよいですか?

【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...

Centos7 に mysql 8.0.13 (rpm) をインストールする詳細なチュートリアル

yum か rpm か? yum によるインストール方法は非常に便利ですが、公式サイトから MySQ...

js で虫眼鏡効果を実現するためのアイデアとコード

この記事の例では、虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...

CSS と HTML とフロントエンド テクノロジーのレイヤー図

フロントエンドテクノロジー層 (写真は少し極端ですが、参考までに) Javascript と DOM...

MySQL学習データベース検索文DQL小百章

目次1. データの簡単な取得2. データの並べ替えと取得2.1. 基本構文2.2. ソート方向を指定...

Reactプロジェクトで要素を使用する方法

React プロジェクトで要素フレームワークを使用するのは今回が初めてです。非常に単純な問題に遭遇し...

ウェブデザインの達人がよく使うレスポンシブフレームワークを共有する(要約)

この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...

MySQLはランダムに一定数のレコードを抽出します

以前は、このような使用シナリオを処理するために rand() で直接 order していましたが、効...

MySQLは変数を使用してさまざまなソートを実装します

コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...