ソースコード: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>マウスが移動したときにズーム効果を実現する CSS</title> <スタイル タイプ="text/css"> div{ 幅: 200ピクセル; 高さ: 300px; マージン:0 自動; 上マージン: 100px; } div画像{ 幅: 100%; 高さ: 100%; transition: all 0.6s; //アニメーションの実行時間を0.6秒に設定する カーソル: ポインタ; } div画像:hover{ transform: scale(1.2); //比率に応じて画像を1.2倍に拡大するように設定します } </スタイル> </head> <本文> <div> <img src="images/unnamed.jpg"> </div> </本文> </html> - 画像が div からはみ出た場合にマスクします。 ソースコード: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <title>マウスが移動したときにズーム効果を実現する CSS</title> <スタイル タイプ="text/css"> div{ 幅: 200ピクセル; 高さ: 300px; マージン:0 自動; 上マージン: 100px; overflow: hidden; //div を超えると画像は非表示になります } div画像{ 幅: 100%; 高さ: 100%; transition: all 0.6s; //アニメーションの実行時間を0.6秒に設定する カーソル: ポインタ; } div画像:hover{ transform: scale(1.3); //比率に応じて画像を1.3倍に拡大するように設定します } </スタイル> </head> <本文> <div> <img src="images/unnamed.jpg"> </div> </本文> </html> これで、マウスが画像上を移動したときに CSS を使用して画像のズームとスロートランジション効果を実現する方法についての説明は終了です。マウスが画像上を移動したときに CSS で画像をズームする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Jira リバース プロキシを実装するための nginx について
>>: MySQL 接続例外とエラー 10061 の解決方法
目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...
入力タイプ「file」とは何ですか?これが何なのかは説明する必要はないと思います。誰もが知っているこ...
コンテンツオーバーフローとは何ですか?実際、テキストが大量にある場合、コンテンツ領域がそれだけの長さ...
より良いスクロールの原則親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します...
目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...
この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例と...
1. VMware Workstation 64バージョンをダウンロードするhttps://www....
1. データベース トランザクションによりデータベースのパフォーマンスが低下します。データの一貫性と...
以下のように表示されます。 LOCATE(部分文字列、文字列)文字列 str 内の部分文字列 sub...
目次最初のステップのインストールステップ2: MySQLデータを準備する3 番目のステップは、bin...
HTML入門ハイパーテキスト マークアップ言語: ハイパーテキスト マークアップ言語ハイパーテキスト...
Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...
目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...
序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...
序文公式アカウントのQRコードは長押しで認識できることは皆さんご存じですが、ミニプログラムに対する制...