CSS3 は 2018 Happy New Year テキスト アニメーションの特殊効果を描画します

<スタイル>
@import url("https://fonts.googleapis.com/css?family=Ultra");
ボディ{
背景色: #070707;
フォントファミリー: 'Ultra'、セリフ;
}

.container {
高さ: 250ピクセル;
幅: 450ピクセル;
パディング: 0;
マージン: 0;
位置: 固定;
上: 0;
下: 0;
左: 0;
右: 0;
マージン: 自動;
リストスタイルタイプ: なし;
境界半径: 10px;
text-align: 中央;
色: #E8DDB5;
フォントサイズ: 4rem;
行の高さ: 1;
}
.container .new Year {
表示: インラインブロック;
フォントサイズ: 8rem;
マージン: 0;
左: 50%;
変換:translateX(-50%);
位置: 絶対;
マージン: 自動;
カラー: #070707;
アニメーション: アニメーション 2 秒イーズ無限;
下: 0;
}

@keyframes アニメーション化 {
0%、100% {
text-shadow: 4px 0px 1px #E8DDB5、6px 0px 1px #E8DDB5、8px 0px 1px #E8DDB5、10px 0px 1px #E8DDB5;
}
50% {
テキストシャドウ: -4px 0px 1px #E8DDB5、-6px 0px 1px #E8DDB5、-4px 0px 1px #E8DDB5、-10px 0px 1px #E8DDB5;
}
}
</スタイル>

一項よく見られる CSS3 による 2018 年新年の文字アニメーション特別版。文字は外部引用谷歌の特定の英文字形式であり、中国語の文字に変換する場合は、目に見える文字を選択できます。