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

推薦する

ゲームの Node.JS バージョンを作成する方法

目次概要ビルドプロセス関連APIリードライン基本的な使い方チョーククリア手順に関する追加情報完全なコ...

JavaScript の矢印関数と通常の関数の違いの詳細な説明

この記事では、JavaScriptにおけるアロー関数と通常の関数の違いについて解説します。具体的な内...

トップに戻るボタンを実装するJavaScript

この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介...

CSS ハート型読み込みアニメーションのソースコードの実装

さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...

Docker コンテナにおける Patroni の簡単な分析

目次イメージの作成ファイル構造Dockerファイルエントリポイント関数ファイルを生成するイメージを構...

Linux の who コマンド例の紹介

誰についてシステムにログインしているユーザーを表示します。 who コマンドを実行すると、現在システ...

史上最もシンプルな MySQL データのバックアップと復元のチュートリアル (パート 1) (パート 35)

データのバックアップと復元に関する最初の記事を皆さんに共有します。具体的な内容は次のとおりです。基本...

HTML doctype の役割の紹介

ドキュメント モードには次の 2 つの機能があります。 1. HTML文書を解析するためにどのHTM...

Docker+DockerCompose を使用して Web アプリケーションをカプセル化する方法

目次テクノロジースタックバックエンドビルドAPIフロントエンドウェブ構築ゲートウェイ建設ゲートウェイ...

MySQL 起動エラーを解決する: エラー 2003 (HY000): 'localhost' の MySQL サーバーに接続できません (10061)

このエラーは初心者によく発生します。この記事では主に、エラー 2003 (HY000): '...

Vuex のモジュール化と名前空間の例のデモ

1. 目的:コードの保守が容易になり、さまざまなデータの分類が明確になります。 2. store/i...

HTML の div と span の比較_PowerNode Java Academy

1. <div></div> と <span></spa...

MySQLでページングクエリを実装する方法

SQL ページング クエリ:背景会社のシステムには、構成管理用のプラットフォーム、いわゆる CRUD...

CocosCreatorでWeChatゲームを作成する方法

目次1. WeChatパブリックプラットフォームからWeChat開発者ツールをダウンロードする2. ...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...