CSS を使用して光効果のあるテキストを作成する方法

CSS を使用してライト効果のあるテキストを作成する方法には、特定のコード例が必要です。

Web デザインと開発では、テキスト効果は一般的で重要な要素です。中でも光の効果を持ったテキストはWebページに神秘的でクールな印象を与えることができます。この記事では、CSS を使用して光効果のあるテキストを作成する方法と、具体的なコード例を紹介します。

まず、テキストを含む HTML 要素を作成する必要があります。たとえば、次のように <div> 要素を使用し、それに一意の <code>id 属性を設定できます。

<div id="light-text">光线文字效果</div>

次に、CSS コードを使用します。この要素に光の効果を追加します。まず、要素のテキストの色を透明に設定する必要があります。

#light-text {
  color: transparent;
}

次に、text-shadow 属性を使用して光の効果を追加します。 text-shadow プロパティを使用すると、テキストの周囲に 1 つ以上の影を作成して、光の効果を実現できます。具体的には、複数の光線のシャドウを設定し、各シャドウのオフセット、ブラー半径、カラーを指定できます。以下に例を示します。

#light-text {
  color: transparent;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 30px #ff00ff, 0 0 35px #ff00ff, 0 0 40px #ff00ff;
}

上記のコードでは、テキスト要素に複数の照明効果を追加しました。各照明効果の色は白 (#fff) です。最後の 3 つの光線の色はマゼンタ (#ff00ff) です。各ライトのオフセット、ぼかし半径、色を調整することで、さまざまな形や色の光の効果を作成できます。

さらに、アニメーション効果を通じてライト テキストにさらに変更を加えることができます。 CSS アニメーションの使用例を次に示します。

@keyframes light-text-animation {
  0% { text-shadow: 0 0 5px #fff; }
  25% { text-shadow: 0 0 10px #fff; }
  50% { text-shadow: 0 0 15px #fff; }
  75% { text-shadow: 0 0 20px #fff; }
  100% { text-shadow: 0 0 25px #fff; }
}

#light-text {
  color: transparent;
  animation: light-text-animation 2s infinite;
}

上記のコードでは、要素 #text の ## を徐々に変更する light-text-animation というアニメーションを定義しました。 -shadowプロパティ。 @keyframes ルールを通じて、アニメーションの各キーフレーム (つまり、アニメーションの開始、中間、終了の状態) を指定できます。最後に、テキスト要素にアニメーションを適用し、2 秒間のループを設定しました。

text-shadow プロパティを設定し、CSS アニメーションを使用することで、さまざまな形や色の光の効果を作成し、テキストにクールな雰囲気を加えることができます。実際の Web デザインや開発では、必要に応じてこれらの CSS テクニックを柔軟に使用して、ページにより多くの創造性と視覚効果をもたらすことができます。