現在、Web ページをより魅力的にするために、Web ページ上にネオン テキストを作成することがトレンドになっています。 Web ページ上にネオン テキストを作成して、Web ページに含まれる重要な情報にユーザーの注意を引く目を引く効果を作成できます。
ロゴ、タイトル、広告などのネオン テキストを使用して、それらを強調表示できます。このチュートリアルでは、text-shadow CSS プロパティの値をカスタマイズしてネオン テキストを作成します。
###文法###上記の構文では「text-shadow」CSS プロパティを使用して、グロー効果を追加しました。最初の値として水平オフセット、2 番目の値として垂直オフセット、3 番目の値としてブラー半径、4 番目の値としてカラーを取得します。
垂直および水平オフセットを常に 0 に設定する必要があります。ネオン効果を生成するには、text-shadow CSS プロパティに異なる色とぼかし半径を持つ複数の値を使用する必要があります。
例 1 (基本的なネオン テキスト)
出力では、ユーザーはネオン効果のあるテキストを観察できます。
リーリー例 2 (レインボー ネオン テキスト)
CSS で「background-image」CSS プロパティを使用して、背景として線形グラデーションを追加します。 4 つの異なる色の線形グラデーションを 45 度で適用しました。さらに、「-webkit-background-clip」CSS プロパティを使用して、背景画像をテキスト形状にクリップします。
さらに、CSS プロパティ「-webkit-text-fill-color」を使用して、テキストを透明色で塗りつぶします。したがって、背景と同じ色で塗りつぶされます。さらに、「rainbow-keyframe」キーフレームでアニメーション CSS プロパティを使用しました。キーフレームでは、色相回転の量を変更して、背景の色相を回転させます。
出力では、ユーザーはテキスト内の虹の効果を確認できます。
リーリー例 3 (点滅するネオンのテキスト)
出力では、グロー効果のある点滅するテキストが確認できます。
リーリー例 4 (グラデーション ネオン テキスト)
出力では、ユーザーはグラデーションのあるテキストの色を確認できます。さらに、ユーザーは Linear-gradient() 関数の引数に異なる色の値を渡すことで、グラデーションの色を変更できます。
リーリーユーザーは、HTML と CSS のみを使用してネオン テキストを作成する方法を学びました。基本的なネオン テキストから、虹効果や点滅効果などのアニメーションを使用して高度なネオン テキストを作成する方法を学びました。
以上がHTML と CSS を使用してネオン テキスト ディスプレイを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。