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

推薦する

MySQLデータベースを誤って削除した後にデータを回復するための手順

日々の運用・保守作業において、MySQL データベースのバックアップは重要です。ウェブサイトにとって...

Element+vueを使用して開始時間と終了時間の制限を実装する

この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...

SQL 結合クエリの内部結合、外部結合、クロス結合の違いの詳細な説明

データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...

JavaScript 中断要求に対するいくつかの解決策の詳細な説明

目次1 約束呼び出しチェーンを中断する約束を破る中止メソッドのラッピング - Axios の Can...

MySQL での置換例の詳細な説明

MySQL での置換例の詳細な説明replace into は insert と似ていますが、rep...

CentOS 7にDockerをインストールする

Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....

Vue コンポーネントでのアンチシェイクとスロットリングの使用例の分析

入力ボックスへのユーザー入力、ウィンドウのサイズ変更、スクロール、Intersection Obse...

VMware12 に CentOS8 をインストールする方法 (VM 仮想マシンに CentOS8 をインストールするチュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...

HTMLページ内の検索機能を完了する

最近、たくさんの人に改変してもらったフレームワークに取り組んでいます。毎日コードを見ていると目が回り...

jQueryはバウンドボールゲームを実装します

この記事では、バウンドボールゲームを実装するためのjQueryの具体的なコードを参考までに共有します...

MySQLデータベースに接続し、クエリ操作を実行するためのIDEAの完全なコード

1.まずMysqlリンク設定ページを書く パッケージ com.wretchant.fredis.me...

MySQL 起動エラー 1067 および文字セットを変更して再起動した後の無効な回復

公式サイトからmysql-5.6.37-winx64.zipの解凍バージョンをダウンロードし、構成フ...

JavaScript関数の詳細な紹介

任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...

MySQL5.6.17データベースをインストールするときにMy.iniファイルを構成する方法

最近、プロジェクトの開発時に MySql データベースを使用しました。MySql に関する記事をいく...

HTML メタビューポート属性の詳細な説明

ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...