記事のタイトルが「模造虫眼鏡」なのはなぜですか? さて、本題に戻りましょう。今日お話ししたいのは、マウスを動かすと元の位置にある画像が拡大するアニメーションです! 最初に思い浮かんだのは、CSS3 の@keyframes 属性でした。これは、より頻繁に使用されるためです。 たとえば、移行を通じてこれを達成できます(今日の焦点) 預言者: CSS3 属性 transform——(rotate: rotate、scale: scale、skew: skew、translate: translate) 例えば: すごく硬そうに見えませんか?トランジションを追加した場合の効果を見てみましょう。 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); } 分析: これで、CSS3 で虫眼鏡効果をシミュレートするいくつかの方法の原理と分析に関するこの記事は終了です。CSS3 虫眼鏡に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 |
>>: Vue+ElementUI はページング関数を実装します - mysql データ
1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...
以前、上司からログイン後にチェックマークを表示できるプログラムを作るように言われたのですが、Baid...
テキストオーバーフローを表示するにはどうすればいいですか? どのようなニーズがありますか?単一行です...
現在、2016サーバーは、win2008や2012よりも優れたマルチサイトhttpsサービスをサポー...
Windowsでのインストールの紹介:こちらもご覧ください –》WindowsでのMySQL 8.0...
本から学ぶことは常に浅はかで、これがさらなるダウンタイムを引き起こすことには決して気づきません......
【問題分析】 chown コマンドを使用できます。ここで ch は change (変更) を表し...
yum か rpm か? yum によるインストール方法は非常に便利ですが、公式サイトから MySQ...
この記事の例では、虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...
フロントエンドテクノロジー層 (写真は少し極端ですが、参考までに) Javascript と DOM...
目次1. データの簡単な取得2. データの並べ替えと取得2.1. 基本構文2.2. ソート方向を指定...
React プロジェクトで要素フレームワークを使用するのは今回が初めてです。非常に単純な問題に遭遇し...
この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...
以前は、このような使用シナリオを処理するために rand() で直接 order していましたが、効...
コアコード -- 以下では、MySQLでのソート列の実装を示します -- テストデータ CREATE...