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をインストールするための完全な手順

推薦する

ビジネス HTML メール作成に関する提案

許可ベースの電子メール マーケティングにより、マーケティングとプロモーションのコストを大幅に削減でき...

MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル (Linux)

この記事では、Linux MySQL 8.0.18のインストールと設定のグラフィックチュートリアルを...

CSS3 のフレックスレイアウト幅の無効性の解決策

2 列レイアウトはプロジェクトでよく使用されます。この効果を実現する方法はたくさんあります。 しかし...

CentOS7.5にHarbor1.7をインストールして設定するプロセス全体

1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...

ウェブフォームデザインのための5つの実用的なヒント

1. フォームテキスト入力のモバイル選択: テキスト入力フィールドにプロンプ​​トが追加されている場...

CSS3ダイヤモンドパズルはdivのみを回転し、背景画像は回転しない機能を実現します

需要背景プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背...

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

Linux システムが VMware にインストールされているかどうかを確認する方法

現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...

JavaScript カウントダウン プロンプト ボックス

この記事の例では、カウントダウンプロンプトボックスを実装するためのJavaScriptの具体的なコー...

MySQL データベース SELECT クエリ式分析

データ管理の大部分は検索であり、SELECT はその大部分を占めています。 SELECT selec...

MySQLの明示的な型変換の簡単な分析

CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...

サイトマップをウェブページの下部に配置するメリットと例

以前は、ほとんどすべての Web サイトに、すべてのページをリストしたサイトマップ ページがありまし...

Mysql が CPU を過剰に占有する場合の最適化方法 (必読)

Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...

MySql マスタースレーブレプリケーションメカニズムの包括的な分析

目次マスタースレーブレプリケーションメカニズム非同期レプリケーション準同期レプリケーションマスタース...

MySQL の重要なログファイルの包括的なインベントリ

目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...