この記事では、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. ...
目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...
Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...
nginx Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー...
1. nginxをインストールして起動する # nginxをインストールする sudo apt-ge...
この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...
目次pom 構成Setting.xml 構成ログインステータスログインが必要ですログインは必要ありま...
目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...
1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...
1. 従来のLRUリンクリストについて簡単に説明するLRU:最も最近使われなかったものLRU リンク...
ref 定義:要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コン...
目次一致と不一致一致するすべてが平等ではない平等と不平等等しい等しくない一致と不一致シンボルの両側の...
sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...
操作効果コードの実装html <div id="ウォッチ"> <...
目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...