質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.10%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,906

score 164

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+5

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

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

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

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


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

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

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


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/11 19:50

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

    キャンセル

+3

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の値を4つ紹介【scale、translate、rotate、skew】】
http://scene-live.com/page.php?page=80


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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/11 19:56

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る