この記事では、CSS 画像アニメーション効果(フォトフレーム)のサンプルコードを紹介し、皆さんと共有します。詳細は次のとおりです。 以下は効果画像です HTMLコード <!-- メイン コンテナー --> <div class="box"> <!-- 画像 --> <img src="images/pic.png" alt=""/> <!-- 目次 --> <div class="box-inner-content"> <h3 class="title">ウサギ</h3> <span class="post">ウェブ開発者</span> </div> </div> CSSコード /* 初期化 */ 体、 html{ フォントサイズ: 100%; } * { パディング: 0; マージン: 0; ボックスのサイズ: 境界線ボックス; } 体 { 背景: #494A5F; フォントの太さ: 500; フォントサイズ: 1.05em; フォント ファミリ: "Microsoft YaHei"、"Segoe UI"、"Lucida Grande"、Helvetica、Arial、sans-serif; } /* 外側のコンテナ */ 。箱 { マージン: 100px 自動; 幅: 400ピクセル; 高さ: 400px; オーバーフロー: 非表示; 位置: 相対的; } .box:before { コンテンツ: ""; 表示: ブロック; 境界線: 30px実線 rgba(255, 255, 255, 0.3); 位置: 絶対; 上: 5px; 左: 5px; 下: 5px; 右: 5px; 不透明度: 1; zインデックス: 2; 遷移: すべて 0.3 秒、緩和 0 秒。 } .box:hover:before { 上: 0; 左: 0; 右: 0; 下部: 0; 境界線: 10px実線 rgba(255, 255, 255, 0.18); } .box:after { コンテンツ: ""; 表示: ブロック; 境界線: 8px 実線 #fff; 位置: 絶対; 上: 35px; 左: 35px; 下: 35px; 右: 35px; 不透明度: 1; zインデックス: 1; 遷移: すべて 0.5 秒、緩和 0 秒。 } .box:hover:after { 上: 0; 左: 0; 下部: 0; 右: 0; 不透明度: 0; } /* 写真*/ .box 画像 { 幅: 100%; 高さ: 自動; 変換: スケール(1.2); 遷移: すべて 0.5 秒、緩和 0 秒。 } .box:hover画像{ 変換: スケール(1); } /* テキストコンテンツ*/ .box .box-inner-content { 位置: 絶対; 左: 45px; 下部: 125px; 右: 45px; テキスト配置: 中央; 色: #fff; 不透明度: 0; 遷移: すべて 0.3 秒、緩和 0 秒。 } .box:hover .box-inner-content { 不透明度: 1; 下: 20px; テキストシャドウ: 0 0 10px #000; } /* タイトル */ .box .title { フォントサイズ: 26px; フォントの太さ: 太字; マージン: 0; } /* 文章*/ .box .post{ 表示: ブロック; フォントサイズ: 16px; フォントスタイル: 斜体; 下マージン: 10px; } ここではピクセルを使用してコンテナのサイズを設定します。bootstrap などのフレームワークを使用する場合は、レスポンシブに設定できます。 画像は 100% に設定されているため、外側のコンテナーのサイズに合わせて調整されます。 外側のコンテナの位置は相対的に設定する必要があることに注意してください。 主に CSS3 の transition プロパティを使用します。ここではブラウザのプレフィックスを設定していませんが、ほとんどのブラウザがこのプロパティに対応しています。心配で面倒でも構わないのであれば、各ブラウザのプレフィックスを追加するのがベストです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQL がデュアルマスターで構成されている場合にデータループの競合を回避する方法
>>: ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント
1. HTMLとは何かHTML (ハイパーテキスト マークアップ言語): ハイパーテキスト マーク...
Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています(...
Nginxはまず、設定ファイル内のどのserver{}ブロックを処理に使用するかを決定します。次のs...
コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...
目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...
前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...
MySQL では、SQL ステートメント rename table を使用してテーブル名を変更できま...
Linux では、ファイルが作成されると、そのファイルの所有者はファイルを作成したユーザーになります...
インストールスクリプトUbuntu / CentOS Debian のインストールに問題があるようで...
1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...
構成の序文プロジェクト構築: vue-cli3 をベースに構築、rem 適応には postcss-p...
序文実際のビジネスでは、ページングは一般的なビジネス要件です。次に、制限クエリを使用します。制限...
CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という...
nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...
Linux でのルーティング設定コマンド1. ホストルーティングを追加する ルートを追加 -host...