CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで光るテキスト（グロー効果）を作成する方法

CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        background-color: rgb(0, 0, 0);
        font-family: cursive;
    }
    .glowing {
        font-size: 80px;
        color: #fff;
        text-align: center;
        -webkit-animation: glowing 1s ease-in-out infinite alternate;
        -moz-animation: glowing 1s ease-in-out infinite alternate;
        animation: glowing 1s ease-in-out infinite alternate;
    }
    @-webkit-keyframes glowing{
        from {
            text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #4f00b6, 0 0 40px #17057c, 0 0 50px #29c2ff, 0 0 60px #96fbff, 0 0 70px #1f0352;
        }
        to {
            text-shadow: 0 0 20px #fff, 0 0 30px #2b4ebe, 0 0 40px #4276e6, 0 0 50px #4644cf, 0 0 60px #3533d1, 0 0 70px #493cbb, 0 0 80px #8beeff;
        }
    }
</style>
</head>
<body>
<h1 class="glowing">GLOWING TEXT EXAMPLE</h1>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、黒背景の上で白い文字が青〜水色の光を放ちながら明滅する、以下のような出力が得られます。

CSSで光るテキスト（グロー効果）を作成する方法

コードのポイント解説

  • text-shadowプロパティ：「0 0 ぼかし半径 色」の形式で影を指定します。ぼかし半径の異なる複数の影をカンマ区切りで重ねることで、文字の周囲に段階的に広がる光の輪を表現できます。
  • @keyframesルール：「from」から「to」へ影の色とぼかし範囲を変化させています。これにより、光が強まったり弱まったりする脈動的なアニメーションが実現します。
  • animationプロパティ：「1s ease-in-out infinite alternate」を指定することで、1秒間隔で滑らかに速度変化しながら、往復して無限に繰り返すアニメーションになります。
  • ベンダープレフィックス：-webkit-や-moz-を併記することで、古いバージョンのブラウザでも同様のグロー効果を表示できます。

背景色を暗くすると光がより際立ちます。影の色やぼかし半径を調整すれば、好みの色合いや光の強さに自由にカスタマイズできるので、ぜひいろいろな値を試してみてください。

  1. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>