How to Create Neon Text With CSS-読み出し

14850 ワード
テキストリンク

How to Create Neon Text With CSS


https://css-tricks.com/how-to-create-neon-text-with-css/

cssプロパティを使用してネオンを作成する

네온사인 글자를 웹사이트에 추가해서 웹페이지를 꾸며볼 수 있다 반짝이는 효과를 준 문자를 만들고 애니메이션을 추가해서 네온사인의 느낌을 줄 수 있다

1.点滅効果をテキストに入れる


  • 「text-shadow」で文字の点滅効果を作成します.

  • text-shadow-スペースで区切り、追加時に(カンマ)で区切ります.

  • text-shadow: [x-offset][y-offset] [blur-radius][color];
  • の1番目の値は、水平線位置、垂直線位置、シャドウ半径、色
    • です.

  • 1、2番目の値はデフォルトの0値で、blur値と希望の色と白を設定する必要があります.

  • 文字のボケは昇順で、1-3番が白4~10番が欲しい色です.
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
   <title>neon</title>
   <style>
       body {
           background-color: rgb(5, 5, 5);
       }
       div {
           font-family: 'Sacramento', cursive;
           display: flex;
           flex-direction: column;
           height: 100vh;
           align-items: center;
           justify-content: center;
           font-style: italic;
       }
      .text p {
           font-size: 54px;
           font-weight: 400;
           text-align: center;
           color: #fff;
           margin: 0;
     		text-shadow:
               0 0 7px #fff,
               0 0 10px #fff,
               0 0 21px #fff,
               0 0 42px rgb(207, 51, 147),
               0 0 82px rgb(207, 51, 147),
               0 0 92px rgb(207, 51, 147),
               0 0 102px rgb(207, 51, 147),
               0 0 151px rgb(207, 51, 147);
       }
</style>   
</head>
<body>
   <div class="text">
       <p>Lets </p>
       <p>Party</p>
   </div>
</body>
</html>
  • は5種類未満の影にすればいいのですが、もっと現実的に見せたいなら、
    やってみます.チークのサイズを調整したり、アニメーションを追加したりしてみましょう.

    • 2.フリッカ効果を作る

  • ネオンは反転して暗くなった.アニメーション作成
    •    @keyframes flicker {
            0%, 16%, 26%, 30%, 58%, 64%, 100% {
                text-shadow:
                0 0 7px #fff,
                0 0 10px rgb(207, 51, 147),
                0 0 21px rgb(207, 51, 147),
                0 0 42px rgb(207, 51, 147),
                0 0 82px rgb(207, 51, 147),
                0 0 92px rgb(207, 51, 147),
                0 0 102px rgb(207, 51, 147),
                0 0 151px rgb(207, 51, 147);
            }

           
            22%, 28%, 60% {
                text-shadow: none;
            }
        } 

 .text p {
	 animation: flicker 1.5s infinite alternate;
  	 color: #fff;
}
  • text-シャドウをアニメーションに加えると、初めてよりリアルな感じがします.
  • の光が点滅する場所でシャドウを消し、間隔を増やして間隔を長くすることができます.
    距離を縮める.

    • 3.繰り返し移動する効果を作る

  • アニメーションの先頭と末尾にのみシャドウを指定します.
  • の果てにもっと大きな影を落とす.
  • のアニメーション時間を短くして、それをたくさん点滅させることができます.
    •         @keyframes flicker {
                
            100% {

                text-shadow:
                0 0 4px  rgb(0, 72, 255),
                0 0 11px rgb(0 54 196),
                0 0 18px rgb(0 54 196),
                0 0 40px rgb(0 54 196),
                0 0 80px rgb(0 54 196),
                0 0 90px rgb(0 54 196),
                0 0 100px rgb(0 54 196),
                0 0 150px rgb(0 54 196);
            
            }
            
            0% {

                text-shadow:
                0 0 4px  rgb(0, 72, 255),
                0 0 12px rgb(0 54 196),
                0 0 15px rgb(0 54 196),
                0 0 38px rgb(0 54 196),
                0 0 73px rgb(0 54 196),
                0 0 80px rgb(0 54 196),
                0 0 94px rgb(0 54 196),
                0 0 160px rgb(0 54 196);

            }
        }
        
         .text p {
            font-size: 72px;
            text-align: center;
            color: rgb(255, 248, 252);
            margin: 0;
            animation: flicker 0.13s ease-in infinite alternate;
            text-shadow:
                0 0 7px rgb(255, 248, 252),
                0 0 10px rgb(255, 248, 252),
                0 0 21px rgb(255, 248, 252),
                0 0 42px rgb(0 54 196),
                0 0 82px rgb(0 54 196),
                0 0 92px rgb(0 54 196),
                0 0 102px rgb(0 54 196),
                0 0 151px rgb(0 54 196);
  		}
    🔨 終了時...
    参照ドキュメントを表示および作成します.テキスト1,2,3テキスト-シャドウは白に近いです.
    アニメーションtext-shadowに欲しい色の値だけを追加し、
    最初のアニメーションtext-shadowはもっと明るい色を加えました
    ネオンとあまり差がないように作ってみましたが、効果が良かったので、面白い体験ができました.
    クロム開発者ツールを使用してチークを調整し、さまざまな試みを行うことができます.
    Cache Pattern
    linuxプロセス制御-fork()