Web アプリケーションの開発中、開発者は常に CSS スタイリング プロパティを効果的に実装する傾向があります。 CSS は、色、位置、配置など、いくつかのスタイル プロパティを提供します。これらのプロパティに加えて、要素にアニメーション アクションを設定できます。この目的のために、「 @キーフレーム s 」というルールが適用されます。
この記事では、CSS を使用して点滅/点滅するテキストを作成する方法を示します。
CSSで点滅するテキストを作成する方法は?
テキストを点滅させるには、CSS「 不透明度 ” を持つプロパティ @キーフレーム 」のルールが適用できます。以下の例をご覧ください。
例 1: 点滅するテキストを作成する
HTML で、「 HTML要素のスタイリングに進みましょう。 スタイル「まばたきスタイル」div CSS「 バックグラウンド ” プロパティは、クラスを持つ div 要素に適用されます “ まばたきスタイル 」。 スタイル「h3」要素 HTML「 ” 要素は、次の CSS プロパティで装飾されています。 「@keyframe ルール」を「blink-text」アニメーションに適用 アニメ名「 点滅テキスト 」がアニメーションプロパティに指定されています。 「 @キーフレーム 」ルールは、アニメーション名の前に追加され、以下に示すように、さまざまな間隔でのアニメーションの動作を示します。 出力 例 2: 複数の点滅テキストの作成 HTML で複数の点滅テキストを作成するには、以下の手順に従います。 」要素にはクラス「 点滅 」。 次に、CSS セクションをチェックして、HTML のスタイルを設定します。 要素。 スタイル “text-div” div 「 .text-div ” を使用して スタイル「点滅」クラス 「 .点滅 」は、HTML タグにアクセスするために使用されます。このクラスには、次のプロパティが実装されています。 「@keyframe ルール」を「点滅スタイル」のアニメーションに適用する 「」の挙動を調整 点滅式 「」を使ったアニメーション @キーフレーム 」 ルール。アニメーションの開始時に、テキストの不透明度は 0 になり、要素の完全な透明度レベルを示します。 2番目の「アニメーションを作成するには」 「要素が少し異なり、クラス」 1 」は、次のアニメーション スタイルで宣言されます。 スタイル「ワン」クラス 出力 さまざまな CSS スタイル プロパティを使用して点滅するテキストを作成する方法を効果的に学習しました。 HTML では、いくつかの CSS プロパティを使用して、テキスト スタイルを点滅させます。 「 アニメーション ' と ' 不透明度 」 プロパティは、一般的にこのコンテキストで定義されます。点滅動作を調整するには、「 @キーフレーム 」ルールは、アニメーション プロパティに対して宣言されています。この記事では、CSS を使用して HTML で点滅または点滅するテキストを作成する方法について説明しました。
< 分周 クラス = 「まばたきスタイル」 >
< h3 > Linux h3 >
分周 >
背景: RGB ( 0 、 0 、 0 ) ;
}
テキスト整列: 中央;
フォントファミリー: Verdana;
色： #ffc310;
アニメーション: 点滅テキスト 1.9 秒の線形無限;
フォントサイズ: 6em;
}
0 % {
不透明度: 0 ;
}
50 % {
不透明度: 1 ;
}
100 % {
不透明度: 0 ;
}
< p クラス = 「点滅」 > きらきら p >
< p クラス = 「点滅するもの」 > 小さな星 * p >
分周 >
幅: 400px;
マージン: 車;
背景色: RGB ( 42 、 49 、 49 ) ;
パディング: 8px;
}
色: 黄色;
フォントサイズ: 40px;
font-family: 筆記体。
フォントの太さ: 太字;
アニメーション: 点滅スタイルの 0.6 秒線形無限;
}
0 % {
不透明度: 0 ;
}
}
アニメーション: 1 秒の線形無限。
}
@ キーフレーム 1 {
50 % {
不透明度: 0 ;
}
}
結論