CSS3 テキストアニメーション効果

CSS3 テキストアニメーション効果

効果

html

<div class="sp-container">
	<div class="sp-content">
		<div class="sp-globe"></div>
		<h2 class="frame-1">123WORDPRESS.COM</h2>
		<h2 class="frame-2">jb51</h2>
		<h2 class="frame-3">www.jb51.net</h2>
		<h2 class="frame-4">テストしてみましょう!</h2>
	</div>
</div>

CS

@import url('https://fonts.googleapis.com/css?family=Barlow');

体 {
	背景: #310404 url​​(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) 繰り返しなし 中央 中央 固定; 
	-webkit-background-size: カバー;
	-moz-background-size: カバー;
	-o-background-size: カバー;
	背景サイズ: カバー;
	フォントファミリ: 'Barlow'、サンセリフ;
}
。容器 {
	幅: 100%;
	位置: 相対的;
	オーバーフロー: 非表示;
}
{
	テキスト装飾: なし;
}
h1.main、p.demos {
	-webkit アニメーション遅延: 18 秒;
	-moz-アニメーション遅延: 18 秒;
	-ms-アニメーション遅延: 18秒;
	アニメーション遅延: 18秒;
}
.spコンテナ{
	位置: 固定;
	上: 0px;
	左: 0px;
	幅: 100%;
	高さ: 100%;
	zインデックス: 0;
	背景: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	背景: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	背景: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	背景: 放射状グラデーション(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.spコンテンツ{
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	左: 0px;
	上: 0px;
	zインデックス: 1000;
}
.spコンテナh2 {
	位置: 絶対;
	上位: 50%;
	行の高さ: 100px;
	高さ: 90px;
	上マージン: -50px;
	フォントサイズ: 90px;
	幅: 100%;
	テキスト配置: 中央;
	色: 透明;
	-webkit-animation: blurFadeInOut 3s 後方イーズイン;
	-moz-animation: blurFadeInOut 3s 後方イーズイン;
	-ms-animation: blurFadeInOut 3秒後方へイーズイン;
	アニメーション: blurFadeInOut 3 秒のイーズイン (逆方向)。
}
.sp-コンテナ h2.frame-1 {
	-webkit-アニメーション遅延: 0秒;
	-moz-アニメーション遅延: 0秒;
	-ms-アニメーション遅延: 0秒;
	アニメーション遅延: 0秒;
}
.sp-コンテナ h2.frame-2 {
	-webkit アニメーション遅延: 3 秒;
	-moz-アニメーション遅延: 3秒;
	-ms-アニメーション遅延: 3秒;
	アニメーション遅延: 3秒;
}
.sp-コンテナ h2.frame-3 {
	-webkit アニメーション遅延: 6 秒;
	-moz-アニメーション遅延: 6秒;
	-ms-アニメーション遅延: 6秒;
	アニメーション遅延: 6秒;
}
.sp-コンテナ h2.frame-4 {
	フォントサイズ: 200px;
	-webkit アニメーション遅延: 9 秒;
	-moz-アニメーション遅延: 9秒;
	-ms-アニメーション遅延: 9s;
	アニメーション遅延: 9秒;
}
.sp-コンテナ h2.frame-5 {
	-webkit-アニメーション: なし;
	-moz-アニメーション: なし;
	-ms-アニメーション: なし;
	アニメーション: なし;
	色: 透明;
	テキストシャドウ: 0px 0px 1px #fff;
}
.sp-コンテナ h2.frame-5 スパン {
	-webkit-animation: blurFadeIn 3s、ease-in 12s、後戻り;
	-moz-animation: blurFadeIn 1s easy-in 12s backwards;
	-ms-animation: blurFadeIn 3s、ease-in 12s 逆方向;
	アニメーション: blurFadeIn 3 秒、ease-in 12 秒後方向;
	色: 透明;
	テキストシャドウ: 0px 0px 1px #fff;
}
.sp-コンテナ h2.frame-5 span:nth-child(2) {
	-webkit アニメーション遅延: 13 秒;
	-moz-アニメーション遅延: 13 秒;
	-ms-アニメーション遅延: 13秒;
	アニメーション遅延: 13秒;
}
.sp-コンテナ h2.frame-5 span:nth-child(3) {
	-webkit アニメーション遅延: 14 秒;
	-moz-アニメーション遅延: 14秒;
	-ms-アニメーション遅延: 14秒;
	アニメーション遅延: 14秒;
}
.sp-地球儀 {
	位置: 絶対;
	幅: 282ピクセル;
	高さ: 273px;
	左: 50%;
	上位: 50%;
	マージン: -137px 0 0 -141px;
	背景: 透明 url(http://web-sonick.zz.mu/images/sl/globe.png) 繰り返しなし 左上;
	-webkit-animation: fadeInBack 3.6 秒線形 14 秒後向き;
	-moz-animation: fadeInBack 3.6 秒線形 14 秒後向き;
	-ms-animation: fadeInBack 3.6 秒線形 14 秒後向き;
	アニメーション: fadeInBack 3.6 秒、線形 14 秒、逆方向へ。
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(不透明度=30)";
	フィルター: アルファ(不透明度=30);
	不透明度: 0.3;
	-webkit-transform: スケール(5);
	-moz-transform: スケール(5);
	-o-変換: スケール(5);
	-ms-transform:スケール(5);
	変換: スケール(5);
}
.sp-サークルリンク{
	位置: 絶対;
	左: 50%;
	下: 100px;
	左マージン: -50px;
	テキスト配置: 中央;
	行の高さ: 100px;
	幅: 100ピクセル;
	高さ: 100px;
	背景: #fff;
	色: #3f1616;
	フォントサイズ: 25px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	境界線の半径: 50%;
	-webkit-animation: fadeInRotate 1s linear 16s backwards;
	-moz-animation: fadeInRotate 1s linear 16s backwards;
	-ms-animation: fadeInRotate 1s linear 16s backwards;
	アニメーション: fadeInRotate 1 秒線形 16 秒後方向;
	-webkit-transform: スケール(1) 回転(0度);
	-moz-transform: スケール(1) 回転(0度);
	-o-transform: スケール(1) 回転(0度);
	-ms-transform: スケール(1) 回転(0度);
	変換: スケール(1) 回転(0度);
}
.sp-circle-link:hover {
	背景: #85373b;
	色: #fff;
}
/**/

@-webkit-keyframes ブラーフェードインアウト {
	0% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 40px #fff;
		-webkit-transform: スケール(1.3);
	}
	20%、75% {
		不透明度: 1;
		テキストシャドウ: 0px 0px 1px #fff;
		-webkit-transform: スケール(1);
	}
	100% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 50px #fff;
		-webkit-transform: スケール(0);
	}
}
@-webkit-keyframes ブラーフェードイン {
	0% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 40px #fff;
		-webkit-transform: スケール(1.3);
	}
	50% {
		不透明度: 0.5;
		テキストシャドウ: 0px 0px 10px #fff;
		-webkit-transform: スケール(1.1);
	}
	100% {
		不透明度: 1;
		テキストシャドウ: 0px 0px 1px #fff;
		-webkit-transform: スケール(1);
	}
}
@-webkit-keyframes フェードインバック {
	0% {
		不透明度: 0;
		-webkit-transform: スケール(0);
	}
	50% {
		不透明度: 0.4;
		-webkit-transform: スケール(2);
	}
	100% {
		不透明度: 0.2;
		-webkit-transform: スケール(5);
	}
}
@-webkit-keyframes フェードイン回転 {
	0% {
		不透明度: 0;
		-webkit-transform: スケール(0) 回転(360度);
	}
	100% {
		不透明度: 1;
		-webkit-transform: スケール(1) 回転(0度);
	}
}
/**/

@-moz-keyframes ブラーフェードインアウト {
	0% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 40px #fff;
		-moz-transform: スケール(1.3);
	}
	20%、75% {
		不透明度: 1;
		テキストシャドウ: 0px 0px 1px #fff;
		-moz-transform: スケール(1);
	}
	100% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 50px #fff;
		-moz-transform: スケール(0);
	}
}
@-moz-keyframes ぼかしフェードイン {
	0% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 40px #fff;
		-moz-transform: スケール(1.3);
	}
	100% {
		不透明度: 1;
		テキストシャドウ: 0px 0px 1px #fff;
		-moz-transform: スケール(1);
	}
}
@-moz-keyframes フェードインバック {
	0% {
		不透明度: 0;
		-moz-transform: スケール(0);
	}
	50% {
		不透明度: 0.4;
		-moz-transform: スケール(2);
	}
	100% {
		不透明度: 0.2;
		-moz-transform: スケール(5);
	}
}
@-moz-keyframes フェードイン回転 {
	0% {
		不透明度: 0;
		-moz-transform: スケール(0) 回転(360度);
	}
	100% {
		不透明度: 1;
		-moz-transform: スケール(1) 回転(0度);
	}
}
/**/

@keyframes ぼかしフェードインアウト {
	0% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 40px #fff;
		変換: スケール(1.3);
	}
	20%、75% {
		不透明度: 1;
		テキストシャドウ: 0px 0px 1px #fff;
		変換: スケール(1);
	}
	100% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 50px #fff;
		変換: スケール(0);
	}
}
@keyframes ぼかしフェードイン {
	0% {
		不透明度: 0;
		テキストシャドウ: 0px 0px 40px #fff;
		変換: スケール(1.3);
	}
	50% {
		不透明度: 0.5;
		テキストシャドウ: 0px 0px 10px #fff;
		変換: スケール(1.1);
	}
	100% {
		不透明度: 1;
		テキストシャドウ: 0px 0px 1px #fff;
		変換: スケール(1);
	}
}
@keyframes フェードインバック {
	0% {
		不透明度: 0;
		変換: スケール(0);
	}
	50% {
		不透明度: 0.4;
		変換: スケール(2);
	}
	100% {
		不透明度: 0.2;
		変換: スケール(5);
	}
}
@keyframes フェードイン回転 {
	0% {
		不透明度: 0;
		変換: スケール(0) 回転(360度);
	}
	100% {
		不透明度: 1;
		変換: スケール(1) 回転(0度);
	}
}

上記はCSS3テキストアニメーション効果の詳細です。CSS3テキストアニメーションの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

<<:  HTML 学習ノート - HTML 構文の詳細な説明 (必読)

>>:  Ubuntu環境にAnaconda3をインストールするための完全な手順

推薦する

MySql8.0バージョンに接続するMyBatisの設定問題について

mybatis を学習しているときにエラーが発生しました。エラーの内容は次のとおりです。データベース...

異なるページ間のJavaScriptデータ転送（URLパラメータ取得）

Web ページでは、あるページに情報を入力すると、別のページにジャンプし、入力した情報が別のページ...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

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

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

CSS チュートリアル: CSS 属性メディア タイプ

スタイルシートの最も重要な機能の 1 つは、ページ、画面、電子シンセサイザーなどの複数のメディアに適...

Vue で pdfjs を使用して PDF ファイルをプレビューする方法

目次序文考えるライブラリディレクトリの解析とダウンロード使い方ファイルの場所実際の通話質問要約する序...

Ubuntu MySQL 5.6 バージョンの削除/インストール/エンコード設定ファイルの設定

1. MySQLを削除する a. sudo apt-get autoremove --purge m...

html2canvasで画像が正常にキャプチャできない時の解決方法

質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...

フロントエンド Vue ユニットテストを始める

目次1. ユニットテストはなぜ必要なのでしょうか? 2. ユニットテストの書き方3. テストツール4...

...

MySQL Index Pushdown (ICP) とは何かを理解するための記事

目次1. はじめに2. 原則III. 実践3.1 インデックスプッシュダウンを使用しない3.2 イン...

Vueのレスポンシブシステムの原理の詳細な説明

目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...

Linux で特定のプログラムを見つけるための whereis の例の詳細な説明

Linuxは特定のプログラムを見つけますwhereis コマンドは主にプログラム ファイルを検索し、...

MySQLでテーブルデータを削除する方法

MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...