HTML と CSS を使用してネオン テキスト ディスプレイを作成する

現在、Web ページをより魅力的にするために、Web ページ上にネオン テキストを作成することがトレンドになっています。 Web ページ上にネオン テキストを作成して、Web ページに含まれる重要な情報にユーザーの注意を引く目を引く効果を作成できます。

ロゴ、タイトル、広告などのネオン テキストを使用して、それらを強調表示できます。このチュートリアルでは、text-shadow CSS プロパティの値をカスタマイズしてネオン テキストを作成します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って HTML と CSS を使用してネオン テキストを作成できます。

リーリー

上記の構文では「text-shadow」CSS プロパティを使用して、グロー効果を追加しました。最初の値として水平オフセット、2 番目の値として垂直オフセット、3 番目の値としてブラー半径、4 番目の値としてカラーを取得します。

垂直および水平オフセットを常に 0 に設定する必要があります。ネオン効果を生成するには、text-shadow CSS プロパティに異なる色とぼかし半径を持つ複数の値を使用する必要があります。

例 1 (基本的なネオン テキスト)

以下の例では、CSS プロパティ「text-shadow」を使用して、テキストの基本的なネオン効果を作成します。ネオン効果を生成するには、境界線の半径と色が異なる複数の値を使用します。

出力では、ユーザーはネオン効果のあるテキストを観察できます。

リーリー

例 2 (レインボー ネオン テキスト)

以下の例では、テキストに虹のネオン効果を作成します。ここでは div 要素内にテキストを追加しました。

CSS で「background-image」CSS プロパティを使用して、背景として線形グラデーションを追加します。 4 つの異なる色の線形グラデーションを 45 度で適用しました。さらに、「-webkit-background-clip」CSS プロパティを使用して、背景画像をテキスト形状にクリップします。

さらに、CSS プロパティ「-webkit-text-fill-color」を使用して、テキストを透明色で塗りつぶします。したがって、背景と同じ色で塗りつぶされます。さらに、「rainbow-keyframe」キーフレームでアニメーション CSS プロパティを使用しました。キーフレームでは、色相回転の量を変更して、背景の色相を回転させます。

出力では、ユーザーはテキスト内の虹の効果を確認できます。

リーリー

例 3 (点滅するネオンのテキスト)

以下の例では、点滅するネオン テキストを作成しました。ここでは、CSS プロパティ「text-shadow」を使用して、テキストにネオン効果を追加します。さらに、「animation」属性を使用して瞬きアニメーションを追加します。 「blink」キーフレームでは、「text-shadow」プロパティの値を変更します。

出力では、グロー効果のある点滅するテキストが確認できます。

リーリー

例 4 (グラデーション ネオン テキスト)

以下の例では、テキストにグラデーションを追加します。 「background-image」プロパティを使用してテキストにグラデーションを適用します。

出力では、ユーザーはグラデーションのあるテキストの色を確認できます。さらに、ユーザーは Linear-gradient() 関数の引数に異なる色の値を渡すことで、グラデーションの色を変更できます。

リーリー

ユーザーは、HTML と CSS のみを使用してネオン テキストを作成する方法を学びました。基本的なネオン テキストから、虹効果や点滅効果などのアニメーションを使用して高度なネオン テキストを作成する方法を学びました。

以上がHTML と CSS を使用してネオン テキスト ディスプレイを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。