LoginSignup
9
6

More than 5 years have passed since last update.

@sylxin株式会社ワンパク

LESSを悪用してテキストに汎用ファイアエフェクトをかける

Last updated at Posted at 2014-02-26

愚者の反対を生きれば賢者になれる。ただし、誰が愚者であるかを判断できる場合において

fire2.gif

もうすぐ春がくる。少し暖かくなると、俺の心のどこかの部分が希望に浮き立つような気配があるのだけど、残念ながら俺はもう34歳で、新しい世界も恋の始まりからも無縁だ。だからこの時期は一層みじめになって、そんな無意味な期待感を電通の広告マンのように押しつけてくる自分の中の18歳をぶん殴りたくなる衝動にかられるわけだ。

若い人はそういうワーキングプア中年の悲哀や焦燥をもっとしっかりと知ってほしいと思う。でも知ったところで何もないし、「マジっすか」とか言うだけなんだろうけどな。それ言われると、おじさんはより惨めになるんだよ。悪かったよ、つまんねえ話して。

さて、CSSでファイアエフェクトっぽくするにはどうしたらいいか。

とか見ると、ファイアエフェクトのサンプルが見れる。見られる。例えば、

を第3の目で除いてみると、こんなCSSが落ちてくる。


@-webkit-keyframes font-effect-fire-animation-keyframes {
  0% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
  }
  25% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.05em 0.17em #FE0, 0.04em -0.12em 0.22em #FC0, 0.04em -0.13em 0.27em #F90, 0.05em -0.23em 0.33em #F70, 0.07em -0.28em 0.47em #F70, 0.1em -0.3em 0.8em #F50, 0.1em -0.3em 0.9em #F40;
  }
  50% {    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
  }
  75% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0 -0.06em 0.18em #FE0, 0.05em -0.15em 0.23em #FC0, 0.05em -0.15em 0.3em #F90, 0.07em -0.25em 0.4em #F70, 0.09em -0.3em 0.5em #F70, 0.1em -0.3em 0.9em #F50, 0.1em -0.3em 1.0em #F40;
  }
  100% {
    text-shadow: 0 -0.05em 0.2em #FFF, 0.01em -0.02em 0.15em #FE0, 0.01em -0.05em 0.15em #FC0, 0.02em -0.15em 0.2em #F90, 0.04em -0.20em 0.3em #F70,0.05em -0.25em 0.4em #F70, 0.06em -0.2em 0.9em #F50, 0.1em -0.1em 1.0em #F40;
  }
}
.font-effect-fire-animation {
  -webkit-animation-duration:0.8s;
  -webkit-animation-name:font-effect-fire-animation-keyframes;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
  color: #ffe;
}

fire1.gif

ゆらゆらしてるね。俺の精神状態のようだよ。これを書いたら俺はすぐにでもブラウザを閉じて、1万年におよぶ長い瞑想に入ると思うから、この不愉快なTipsに、もう少しだけ付き合っていただきたい。

君が必要としているものは、君が嫌っているものの中にある

この気色の悪いCSSには問題がいくつかある。

  • CSSアニメーション関係のプロパティがベンダープレフィックスでしか指定されていない
  • 色が固定されている(#ffe)

ベンダープレフィックスについては、きっと色々事情があるのだろう。Firefoxや15年前の阪大生以外は見に覚えのないOmniWebにすら対応していない。

色は最後の

color: #ffe;

を変えればいいのだと思うのかもしれないが、
さにあらず！
keyframesにアニメーション中の炎の色が直接指定されているので、最後のcolorプロパティだけではなく、全ての色指定を変更する必要があるのである。
なので、そのへんを解決するためにLESSで汎用的に使えるファイアエフェクトのクラスを定義してみよう。

ちなみに「さにあらず！」という言い回しはずっと昔、何かの雑誌で見たことがあるのだが、最高に調子に乗ってる感があって、読んでるとイライラするのであえて使ってみた。そう、このtipsは読者への嫌がらせのために存在するのだ。今さら気づいても遅い。5分の浪費も5年の浪費も本質的に違いはない、最後まで読んでいただきたいと思う。

知ったような口をきく権利は、何もしない義務によって保証されている

というわけで出来たLESSソースがこれだ。

.animation-fire(@name,@color){

    @color0: lighten(@color, 30%);
    @color1: spin(@color,28);
    @color2: spin(@color,20);
    @color3: spin(@color,8);
    @color4: spin(@color,-8);
    @color5: spin(@color,-12);

    .animation-fire-key1(){
        text-shadow: 
        0 -0.05em 0.2em @color0,
        0.01em -0.02em 0.15em @color1,
        0.01em -0.05em 0.15em @color2,
        0.02em -0.15em 0.2em @color3,
        0.04em -0.20em 0.3em @color, 
        0.05em -0.25em 0.4em @color,
        0.06em -0.2em 0.9em @color4,
        0.1em -0.1em 1.0em @color5;
    }

    .animation-fire-key2(){
        text-shadow:
        0 -0.05em 0.2em @color0, 
        0 -0.05em 0.17em @color1,
        0.04em -0.12em 0.22em @color2,
        0.04em -0.13em 0.27em @color,
        0.05em -0.23em 0.33em @color,
        0.07em -0.28em 0.47em @color3,
        0.1em -0.3em 0.8em @color4,
        0.1em -0.3em 0.9em @color5;
    }

    .animation-fire-key3(){
        text-shadow: 
        0 -0.05em 0.2em @color0,
        0 -0.06em 0.18em @color1,
        0.05em -0.15em 0.23em @color2,
        0.05em -0.15em 0.3em @color,
        0.07em -0.25em 0.4em @color,
        0.09em -0.3em 0.5em @color3,
        0.1em -0.3em 0.9em @color4,
        0.1em -0.3em 1.0em @color5;
    }

    .animation-fire-keyframes (@name, @vendor:"", @bind:""){
        @keyf: ~"@{bind}@@{vendor}keyframes fr-@{name} { `'\n'` 0%";

        @{keyf} {
            .animation-fire-key1();
        }
        25% {
            .animation-fire-key2();
        }
        50% {
            .animation-fire-key1();
        }
        75% {
            .animation-fire-key3();
        }
        100% {
            .animation-fire-key1();
        }
    }

    @bind: "} `'\n'`";
    .animation-fire-keyframes(@name, "-moz-");
    .animation-fire-keyframes(@name, "-webkit-", @bind);
    .animation-fire-keyframes(@name, "",@bind);
    @terminate: ~"} `'\n'` .@{name} `'\n'`";
    @frname: ~"fr-@{name}";
    @{terminate} {
        -moz-animation: @frname 0.8s infinite alternate;
        -webkit-animation: @frname 0.8s infinite alternate;
        animation: @frname 0.8s infinite alternate;
        color: @color0
    }
}

そしてこんな風に使う

.animation-fire("fire",#f70);
.animation-fire("bluefire",#07f);
.animation-fire("greenfire",#7f0);

.animation-fireはクラスのように見えるし、実際そうなのだが、クラス定義をCSSファイル上に展開するマクロのようなものになっている。

.animation-fire(クラス名,色）

と書くことでキーフレームの設定とクラス定義が展開される。クラスはあくまでCSS上のクラスなので、LESS上で使用することはできない。

またアニメーションのキーフレーム定義自体はfr-クラス名という名前で展開されているので、a:hoverでファイアしたいとかそういう中学生並みのセンスの君は、


.animation-fire("fire",#f70）
a:hover{
  -moz-animation: fr-fire 0.8s infinite alternate;
  -webkit-animation: fr-fire 0.8s infinite alternate;
  animation: fr-fire 0.8s infinite alternate;
  color: lighten(#f70, 30%);
}

とでもすれば良い。冗長だと思ったらそれ用のクラスを定義してもいい。もう何でも好きにやったらいいじゃない。私は実家に帰らせていただきます。

コンパイルしてCSSを作ったらHTMLで

<p class="fire" style="font-size: 300px">死にたい</p>

とかやればいいと思う。

ちなみに展開されたCSSは以下のようになります。

@-moz-keyframes fr-fire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
25% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0 -0.05em 0.17em #ffee00, 0.04em -0.12em 0.22em #ffcc00, 0.04em -0.13em 0.27em #ff7700, 0.05em -0.23em 0.33em #ff7700, 0.07em -0.28em 0.47em #ff9900, 0.1em -0.3em 0.8em #ff5500, 0.1em -0.3em 0.9em #ff4400;
}
50% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
75% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0 -0.06em 0.18em #ffee00, 0.05em -0.15em 0.23em #ffcc00, 0.05em -0.15em 0.3em #ff7700, 0.07em -0.25em 0.4em #ff7700, 0.09em -0.3em 0.5em #ff9900, 0.1em -0.3em 0.9em #ff5500, 0.1em -0.3em 1em #ff4400;
}
100% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
} 
@-webkit-keyframes fr-fire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
25% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0 -0.05em 0.17em #ffee00, 0.04em -0.12em 0.22em #ffcc00, 0.04em -0.13em 0.27em #ff7700, 0.05em -0.23em 0.33em #ff7700, 0.07em -0.28em 0.47em #ff9900, 0.1em -0.3em 0.8em #ff5500, 0.1em -0.3em 0.9em #ff4400;
}
50% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
75% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0 -0.06em 0.18em #ffee00, 0.05em -0.15em 0.23em #ffcc00, 0.05em -0.15em 0.3em #ff7700, 0.07em -0.25em 0.4em #ff7700, 0.09em -0.3em 0.5em #ff9900, 0.1em -0.3em 0.9em #ff5500, 0.1em -0.3em 1em #ff4400;
}
100% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
} 
@keyframes fr-fire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
25% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0 -0.05em 0.17em #ffee00, 0.04em -0.12em 0.22em #ffcc00, 0.04em -0.13em 0.27em #ff7700, 0.05em -0.23em 0.33em #ff7700, 0.07em -0.28em 0.47em #ff9900, 0.1em -0.3em 0.8em #ff5500, 0.1em -0.3em 0.9em #ff4400;
}
50% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
75% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0 -0.06em 0.18em #ffee00, 0.05em -0.15em 0.23em #ffcc00, 0.05em -0.15em 0.3em #ff7700, 0.07em -0.25em 0.4em #ff7700, 0.09em -0.3em 0.5em #ff9900, 0.1em -0.3em 0.9em #ff5500, 0.1em -0.3em 1em #ff4400;
}
100% {
  text-shadow: 0 -0.05em 0.2em #ffc999, 0.01em -0.02em 0.15em #ffee00, 0.01em -0.05em 0.15em #ffcc00, 0.02em -0.15em 0.2em #ff9900, 0.04em -0.2em 0.3em #ff7700, 0.05em -0.25em 0.4em #ff7700, 0.06em -0.2em 0.9em #ff5500, 0.1em -0.1em 1em #ff4400;
}
} 
 .fire {
  -moz-animation: fr-fire 0.8s infinite alternate;
  -webkit-animation: fr-fire 0.8s infinite alternate;
  animation: fr-fire 0.8s infinite alternate;
  color: #ffc999;
}
@-moz-keyframes fr-bluefire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
25% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0 -0.05em 0.17em #0000ff, 0.04em -0.12em 0.22em #0022ff, 0.04em -0.13em 0.27em #0077ff, 0.05em -0.23em 0.33em #0077ff, 0.07em -0.28em 0.47em #0055ff, 0.1em -0.3em 0.8em #0099ff, 0.1em -0.3em 0.9em #00aaff;
}
50% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
75% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0 -0.06em 0.18em #0000ff, 0.05em -0.15em 0.23em #0022ff, 0.05em -0.15em 0.3em #0077ff, 0.07em -0.25em 0.4em #0077ff, 0.09em -0.3em 0.5em #0055ff, 0.1em -0.3em 0.9em #0099ff, 0.1em -0.3em 1em #00aaff;
}
100% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
} 
@-webkit-keyframes fr-bluefire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
25% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0 -0.05em 0.17em #0000ff, 0.04em -0.12em 0.22em #0022ff, 0.04em -0.13em 0.27em #0077ff, 0.05em -0.23em 0.33em #0077ff, 0.07em -0.28em 0.47em #0055ff, 0.1em -0.3em 0.8em #0099ff, 0.1em -0.3em 0.9em #00aaff;
}
50% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
75% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0 -0.06em 0.18em #0000ff, 0.05em -0.15em 0.23em #0022ff, 0.05em -0.15em 0.3em #0077ff, 0.07em -0.25em 0.4em #0077ff, 0.09em -0.3em 0.5em #0055ff, 0.1em -0.3em 0.9em #0099ff, 0.1em -0.3em 1em #00aaff;
}
100% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
} 
@keyframes fr-bluefire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
25% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0 -0.05em 0.17em #0000ff, 0.04em -0.12em 0.22em #0022ff, 0.04em -0.13em 0.27em #0077ff, 0.05em -0.23em 0.33em #0077ff, 0.07em -0.28em 0.47em #0055ff, 0.1em -0.3em 0.8em #0099ff, 0.1em -0.3em 0.9em #00aaff;
}
50% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
75% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0 -0.06em 0.18em #0000ff, 0.05em -0.15em 0.23em #0022ff, 0.05em -0.15em 0.3em #0077ff, 0.07em -0.25em 0.4em #0077ff, 0.09em -0.3em 0.5em #0055ff, 0.1em -0.3em 0.9em #0099ff, 0.1em -0.3em 1em #00aaff;
}
100% {
  text-shadow: 0 -0.05em 0.2em #99c9ff, 0.01em -0.02em 0.15em #0000ff, 0.01em -0.05em 0.15em #0022ff, 0.02em -0.15em 0.2em #0055ff, 0.04em -0.2em 0.3em #0077ff, 0.05em -0.25em 0.4em #0077ff, 0.06em -0.2em 0.9em #0099ff, 0.1em -0.1em 1em #00aaff;
}
} 
 .bluefire {
  -moz-animation: fr-bluefire 0.8s infinite alternate;
  -webkit-animation: fr-bluefire 0.8s infinite alternate;
  animation: fr-bluefire 0.8s infinite alternate;
  color: #99c9ff;
}
@-moz-keyframes fr-greenfire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
25% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0 -0.05em 0.17em #00ff00, 0.04em -0.12em 0.22em #22ff00, 0.04em -0.13em 0.27em #77ff00, 0.05em -0.23em 0.33em #77ff00, 0.07em -0.28em 0.47em #55ff00, 0.1em -0.3em 0.8em #99ff00, 0.1em -0.3em 0.9em #aaff00;
}
50% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
75% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0 -0.06em 0.18em #00ff00, 0.05em -0.15em 0.23em #22ff00, 0.05em -0.15em 0.3em #77ff00, 0.07em -0.25em 0.4em #77ff00, 0.09em -0.3em 0.5em #55ff00, 0.1em -0.3em 0.9em #99ff00, 0.1em -0.3em 1em #aaff00;
}
100% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
} 
@-webkit-keyframes fr-greenfire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
25% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0 -0.05em 0.17em #00ff00, 0.04em -0.12em 0.22em #22ff00, 0.04em -0.13em 0.27em #77ff00, 0.05em -0.23em 0.33em #77ff00, 0.07em -0.28em 0.47em #55ff00, 0.1em -0.3em 0.8em #99ff00, 0.1em -0.3em 0.9em #aaff00;
}
50% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
75% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0 -0.06em 0.18em #00ff00, 0.05em -0.15em 0.23em #22ff00, 0.05em -0.15em 0.3em #77ff00, 0.07em -0.25em 0.4em #77ff00, 0.09em -0.3em 0.5em #55ff00, 0.1em -0.3em 0.9em #99ff00, 0.1em -0.3em 1em #aaff00;
}
100% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
} 
@keyframes fr-greenfire { 
 0% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
25% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0 -0.05em 0.17em #00ff00, 0.04em -0.12em 0.22em #22ff00, 0.04em -0.13em 0.27em #77ff00, 0.05em -0.23em 0.33em #77ff00, 0.07em -0.28em 0.47em #55ff00, 0.1em -0.3em 0.8em #99ff00, 0.1em -0.3em 0.9em #aaff00;
}
50% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
75% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0 -0.06em 0.18em #00ff00, 0.05em -0.15em 0.23em #22ff00, 0.05em -0.15em 0.3em #77ff00, 0.07em -0.25em 0.4em #77ff00, 0.09em -0.3em 0.5em #55ff00, 0.1em -0.3em 0.9em #99ff00, 0.1em -0.3em 1em #aaff00;
}
100% {
  text-shadow: 0 -0.05em 0.2em #c9ff99, 0.01em -0.02em 0.15em #00ff00, 0.01em -0.05em 0.15em #22ff00, 0.02em -0.15em 0.2em #55ff00, 0.04em -0.2em 0.3em #77ff00, 0.05em -0.25em 0.4em #77ff00, 0.06em -0.2em 0.9em #99ff00, 0.1em -0.1em 1em #aaff00;
}
} 
 .greenfire {
  -moz-animation: fr-greenfire 0.8s infinite alternate;
  -webkit-animation: fr-greenfire 0.8s infinite alternate;
  animation: fr-greenfire 0.8s infinite alternate;
  color: #c9ff99;
}

本当はキャプチャして、アニメーションGIF貼ったりしてキャッキャうウフフしたかった。したかったけど！でもなんかこんな程度で粋がってるのが急に虚しくなったのでやめます。さようなら。

なんか思いがけず、ストックしていただいたのでアニメーションGIFを追加したり例を追加したりしました。ありがとう！増長させてくれて！

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
6