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

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

推薦する

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる1. ...

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

Filebeat を使用して Nginx ログを収集する方法

Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...

Nginx キャッシュ ファイルと動的ファイルの自動バランス設定スクリプト

nginx Nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー...

vue プロジェクトのデプロイと Nginx でのプロキシ設定の問題の分析

1. nginxをインストールして起動する # nginxをインストールする sudo apt-ge...

Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...

dockerfile-maven-plugin 使用ガイドの概要

目次pom 構成Setting.xml 構成ログインステータスログインが必要ですログインは必要ありま...

JavaScript で Baidu Maps API にアクセスする方法と手順

目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...

MySQL の lru リンク リストの簡単な分析

1. 従来のLRUリンクリストについて簡単に説明するLRU:最も最近使われなかったものLRU リンク...

Vue での ref の使用法とデモンストレーション

ref 定義:要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は、親コン...

JSにおける合同と不等式、等式と不等式の問題について

目次一致と不一致一致するすべてが平等ではない平等と不平等等しい等しくない一致と不一致シンボルの両側の...

Linux での sshd サービスとサービス管理コマンドの詳細な説明

sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

Vue の echarts ツールチップにクリック イベントを追加する詳細な説明

目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...