【CSSアニメーション】テキストが炎のように燃える「ファイヤーエフェクト」の作り方

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。 今回は視覚的にインパクト抜群の「テキストが炎のように燃えるアニメーション」をご紹介します。

このエフェクトは、文字そのものが赤やオレンジに揺らめき、まるで燃えているように見せられるのが特徴です。 ホラー系のサイト、ゲーム系のタイトル、ハロウィンイベントの告知など、強烈な印象を与えたいときに最適です。

しかもCSSと少しのアニメーションを使うだけで、意外とシンプルに実装できます。 それでは実際のコードを見ていきましょう。

基本の炎テキストエフェクト

まずは、CSSのアニメーションを使ったシンプルな炎風アニメーションです。

See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on CodePen.

これだけでも、炎が揺らめいているような燃焼感が表現できます。

応用編：ゆらめく炎の揺れを追加

さらにリアルさを出すために、文字を少し揺らして炎の動きを強調してみましょう。

See the Pen Untitled by 小瀧賢 (@ekwwawpb-the-styleful) on CodePen.

これで炎が揺らめいて燃えているような雰囲気がより強調されます。

まとめ

「燃える文字エフェクト」は、CSSのtext-shadowと@keyframesをうまく組み合わせることで、比較的シンプルに実現できます。 さらにアニメーションを複数組み合わせれば、よりリアルでドラマチックな効果を演出できます。

イベント告知やホラー演出など、インパクトを重視した場面でぜひ使ってみてください。

satokotadesignキャンペーン実施中！

静岡県浜松市でホームページ制作ならsatokotadesign