質問: シャドウバースというゲームがあります。 そのゲームの中では、カードを手札から場に出す時にアニメーションをします。 それをCSSで作りたいと思っております。 アニメーションの流れは、下記の様になります。(今回は、1の実現方法をご教授頂きたいです。) 1カードがドロップされた場所でカードと同じ大きさの光を発する。 2カードが回転と拡大をしながら中央に向かう。 3カードが光り輝くように消える。 4カードがドラゴンボールの登場シーンの様にフィールドにでる。 下記URLの05:20あたりが分かりやすいと思います。(スローにした方が見易いです。) https://www.youtube.com/watch?v=rZTTSlXKV5w どのようにしたら、このような光のエフェクトを出せるのでしょうか?
回答: > > カードが光輝くエフェクトを作りたい > > > まず、前提の切り分けをさせてください。 Web上で動的な**ゲームを作りたいなら、JavaScriptがほぼ必須**です。 逆に、**アニメーションだけ純粋に見せたいなら、GIF動画でも可能**です。 そこで、普通のWebページを作るが、光るエフェクトだけ利用したい、 というのがご質問の意図だと、想定することにしましょう。 しかし、**CSS自体にカードを光らすエフェクトはありません**。 **エフェクトは画像ソフト、動画ソフトで作っている**はずです。 具体的には、「After Effects」などを使っていると推測します。 ただし、これは商業作品で使われているので、価格が高いです。 つまり、**CSSがどうこう以前に、エフェクトの素材を作る必要**があります。 そして、CSS自体はアニメを見せるだけなので、**素材を作る方が難しい**です。 ああいうエフェクトを個人制作のレベルではあまり見かけなくて、 見た目にもカッコイイから、やりたいんだろうと思いますが、 とうぜん難しいです。簡単だったらみんなやってるわけですから。 でもまあ、フリーソフトやフリー素材を組み合わせても、 **技術しだいでは近い水準まで表現できる**と思います。