CSSフォントグロー効果（例付き）

Css Font Glow Effect

1. CSSフォントのグロー効果：

CSS3は、グロー効果のプロパティを直接設定しませんが、text-shadowプロパティを使用してこの効果を実現します

1. text-shadow：この属性は、テキストに影の効果を追加します。

text-shadow: h-shadow v-shadow blur color

2.パラメータ：

パラメータ名	説明
h-シャドウ	負の値になる可能性のある水平シャドウの位置（シャドウの水平オフセット）が必要です
v-シャドウ	負の値になる可能性のある垂直シャドウの位置（シャドウの垂直オフセット）が必要です
ぼかし	シャドウブラー距離（デフォルトは0）、オプション
色	影の色（デフォルトは現在のフォントの色）、オプション

3.説明： 参考記事
1.一見したところ、text-shadow属性は、テキストシャドウを設定するためにのみ使用されます。フォントグロー効果は得られていないようですが、そうではありません。これは、text-shadow属性Officeの微妙な点です。
2.影の水平オフセットと垂直オフセットが両方とも0の場合、影はテキストと一致します。このとき、シャドウブラー距離を長くすると、フォント外のグローの効果がなくなります。
3.もちろん、外側の輝きをよりクールにするために、テキストシャドウの別の機能を使用する必要があります。同時に複数のシャドウを設定します（複数のシャドウをコンマで区切って設定します）。

4.例：たとえば、静的なテキストグロー効果を設定します。

HTMLコード：（divを宣言してからテキストを追加します）

<div>I will shinediv>

cssスタイル:(便宜上、背景を黒、テキストを白に設定してから、中央に表示します）

div{ height : 600px //Set a high line-height : 600px //Set the line height (center vertically) background-color:black //Black background: black font-size: 120px //Font 120 pixels color : white //Font color: white text-align: center //Center horizontally text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red //Set the glow effect }

効果を確認してください：

テキストシャドウのぼかしプロパティテスト：
上で追加した属性値は次のとおりです：text-shadow：0 0 10px red、0 0 20px red、0 0 30px red、0 0 40px red私たちはtext-shadowにいることがわかります4つの属性値は後で追加されました、 -効果を直接確認できない場合があります。1つずつ追加してみます。

左から右へ	追加された属性値
図1	テキストシャドウ：0 010px赤
図2	テキストシャドウ：0 0 10px赤、0 020px赤
画像3	テキストシャドウ：0 0 10px赤、0 0 20px赤、0 030px赤
図4	テキストシャドウ：0 0 10px赤、0 0 20px赤、0 0 30px赤、0 040px赤

効果:(図1）

効果:(図2）

効果:(図3）

効果:(図4）

シャドウを1つだけ追加すると、色が非常に明るくなります。グロー効果を実現するために4つのシャドウを追加しますが、複数のシャドウが追加されていることをどのように確認できますか？
シャドウごとに10pxのオフセットを段階的に追加し、ぼかし領域を0に設定して、次のことを明確に確認します。

text-shadow: 0 10px 0px red,0 20px 0 red,0 30px 0 red,0 40px 0 red

写真を見てください:(明らかに4つの影が見えます）

実際に追加する必要のあるシャドウの数を確認し、各シャドウのシャドウ領域を定義します。色を混ぜることもできます。 （以下のいくつかの色を試してください）

text-shadow: 0 0 5px white,0 0 10px #00FFFF,0 0 15px #7FFF00,0 0 20px white

次に、CSSフォントの動的な光の効果：

インターネットには多くの動的効果があります。実際にはCSSグローフォントを使用してそれらを実現できます。まず、効果を見てみましょう。 画像ソース

以下では、動的に光る例も実装していますが、上記のようにdivを追加してから、スタイルを設定します。

HTMLコード：

<div>I will shinediv>

cssスタイル:(これは上記の静的グロースタイルです）

div{ height : 600px //Set a high line-height : 600px //Set the line height (center vertically) background-color:black //Black background: black font-size: 120px //Font 120 pixels color : white //Font color: white text-align: center //Center horizontally text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red //Set the glow effect }

マウスをdivに合わせると、フォントが動的に光ります。

実装のアイデア：マウスホバーイベントをdivに追加し、CSS3アニメーションアニメーションプロパティを使用して動的効果を実現します。アニメーションに特に精通していない場合は、学習することを学ぶことができます。

1.上記のCSS効果に基づいて、最初にホバーイベントを追加します。

アニメーションプロパティを設定するときは、次の点に注意してください。
Internet Explorer 10、Firefox、およびOperaは、@ keyframesルールとアニメーションプロパティをサポートしています。
ChromeとSafariにはプレフィックス-webkit-が必要です。

div:hover{ //In order to be compatible with different browsers, declare two -webkit-animation: Glow 0.5s ease infinite alternate //Compatible with Chrome animation: Glow 0.5s ease infinite alternate }

次に、それにシャドウ効果を追加します（互換性のために2つ記述してください）

@-webkit-keyframes Glow { //Compatible with Chrome and Safari from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00a67c, 0 0 70px #00a67c, 0 0 80px #00a67c, 0 0 100px #00a67c, 0 0 150px #00a67c } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00a67c, 0 0 35px #00a67c, 0 0 40px #00a67c, 0 0 50px #00a67c, 0 0 75px #00a67c } } @keyframes Glow { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00a67c, 0 0 70px #00a67c, 0 0 80px #00a67c, 0 0 100px #00a67c, 0 0 150px #00a67c } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00a67c, 0 0 35px #00a67c, 0 0 40px #00a67c, 0 0 50px #00a67c, 0 0 75px #00a67c } }

効果を見る：マウスにカーソルを合わせると、設定したダイナミックグローフォントが表示され、0.5秒以内にフォントの影が変わり、時間と色の変更をカスタマイズできます。

さて、上記のすべてが基本的にすべての要件を達成できることを学び、学んだ知識、それを好きになることを忘れないでください、ありがとう！