CSS 画像アニメーション効果のサンプルコード(フォトフレーム)

CSS 画像アニメーション効果のサンプルコード(フォトフレーム)

この記事では、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 がデュアルマスターで構成されている場合にデータループの競合を回避する方法

>>:  ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

推薦する

htm 初心者ノート(初心者は必ず読んでください)

1. HTMLとは何かHTML (ハイパーテキスト マークアップ言語): ハイパーテキスト マーク...

Docker を使用して Jenkins をインストールするためのサンプル コード

Dockerコンテナのインストール時に遭遇しやすい2つの問題1.ポートはすでに割り当てられています(...

Nginxはhttpリクエスト実装プロセス分析を処理する

Nginxはまず、設定ファイル内のどのserver{}ブロックを処理に使用するかを決定します。次のs...

QQブラウザ機能を実装するためのCSS

コード知識ポイント1. fullpage.jsを組み合わせてフルスクリーンスクロールを実現する2. ...

js で 0ms 遅延タイマーを実装するいくつかの方法

目次キューマイクロタスク非同期/待機メッセージチャネルやっと付録ここ二日間、「タイムリーな setT...

JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...

MySQLはSQL文を使用してテーブル名を変更します

MySQL では、SQL ステートメント rename table を使用してテーブル名を変更できま...

Linux でファイルのユーザーとグループを変更する方法

Linux では、ファイルが作成されると、そのファイルの所有者はファイルを作成したユーザーになります...

Dockerの一般的なコマンドとヒントのまとめ

インストールスクリプトUbuntu / CentOS Debian のインストールに問題があるようで...

TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...

vue+px2rem(rem適応)を使用してPCで大画面適応を実装するためのサンプルコード

構成の序文プロジェクト構築: vue-cli3 をベースに構築、rem 適応には postcss-p...

MySQL 最適化技術における Limit クエリの最適化分析

序文実際のビジネスでは、ページングは​​一般的なビジネス要件です。次に、制限クエリを使用します。制限...

CSS3のtransform属性で実装される4つの機能

CSS3 では、transform 関数を使用して、テキストや画像の回転、拡大縮小、傾斜、移動という...

nginx 設定ファイルパスとリソースファイルパスを表示する方法

nginx 設定ファイルのパスを表示する nginx -t 経由nginx -t コマンドの本来の機...

複数のネットワークカードを備えた Linux システムでのルーティング構成の詳細な説明

Linux でのルーティング設定コマンド1. ホストルーティングを追加する ルートを追加 -host...