カードが光輝くエフェクトを作りたい

Question

シャドウバースというゲームがあります。
そのゲームの中では、カードを手札から場に出す時にアニメーションをします。
それをCSSで作りたいと思っております。
アニメーションの流れは、下記の様になります。（今回は、①の実現方法をご教授頂きたいです。）
①カードがドロップされた場所でカードと同じ大きさの光を発する。
②カードが回転と拡大をしながら中央に向かう。
③カードが光り輝くように消える。
④カードがドラゴンボールの登場シーンの様にフィールドにでる。

下記URLの05:20あたりが分かりやすいと思います。(スローにした方が見易いです。）
https://www.youtube.com/watch?v=rZTTSlXKV5w

どのようにしたら、このような光のエフェクトを出せるのでしょうか？

Answer 1

カードが光輝くエフェクトを作りたい

まず、前提の切り分けをさせてください。

Web上で動的なゲームを作りたいなら、JavaScriptがほぼ必須です。
逆に、アニメーションだけ純粋に見せたいなら、GIF動画でも可能です。

そこで、普通のWebページを作るが、光るエフェクトだけ利用したい、
というのがご質問の意図だと、想定することにしましょう。

---

しかし、CSS自体にカードを光らすエフェクトはありません。
エフェクトは画像ソフト、動画ソフトで作っているはずです。

具体的には、「After Effects」などを使っていると推測します。
ただし、これは商業作品で使われているので、価格が高いです。

つまり、CSSがどうこう以前に、エフェクトの素材を作る必要があります。
そして、CSS自体はアニメを見せるだけなので、素材を作る方が難しいです。

---

ああいうエフェクトを個人制作のレベルではあまり見かけなくて、
見た目にもカッコイイから、やりたいんだろうと思いますが、
とうぜん難しいです。簡単だったらみんなやってるわけですから。

でもまあ、フリーソフトやフリー素材を組み合わせても、
技術しだいでは近い水準まで表現できると思います。

Comments

[fjaiofjawiefjaw]

回答ありがとうございます。
使用していると思われるソフトを具体的に教えて頂き、ありがとうございます。
類似のフリーソフトを使い近い表現のエフェクトが作れないか試してみたいと思います。

Answer 2

Transform3D や animation を駆使すれば変形や回転などのエフェクトは作れるかもしれませんね。

【【CSS3】Transform（変形）関連のまとめ - Qiita】
http://qiita.com/7968/items/eddfeb4b424d7c2d2d34

【CSS3 アニメーションの基礎 @keyframes transform | Ri-mode Rainbow】
http://ri-mode.com/rainbow/2013/06/10/css3_keyframes_transform/

【【CSS3】CSSのtransformの値を４つ紹介【scale、translate、rotate、skew】】
http://scene-live.com/page.php?page=80

---

例えば、teratailの黄色で囲われたユーザーアイコン（私のアイコンとか）はマウスホバーで反応します。これは「光っている」に入りますか？（私には「白」が通過しているように見えます）

光表現は乱暴な言い方をすると、比較的白いものが大きさを変えながらぼけたり半透明になったりするだけ、とも言えます。下の例は（雑ですが）真ん中の四角にマウスを持っていくと反応します。（明るくなりました？） 例えばこういうものを上手く組み合わせて使えばエフェクトみたいに出来るかもしれません。

【Create a new fiddle - JSFiddle】
https://jsfiddle.net/Lp34u837/

Comments

[fjaiofjawiefjaw]

回答ありがとうございます。
box-shadowでこれだけ光らせる表現ができることを教えて頂き、幸いです。
参考にさせて頂きます。