CSSで色んなものを虹色に光らせる

ゲーミングキーボードって虹色に光るのが、マリオカートでスター使ったときみたいでカッコいいですよね。
あなたもWeb上で何かを虹色に光らせたいときがあるはずです。
今回はそんなときに便利な方法を紹介したいと思います。

まずはこちらを御覧ください。

こ、これは、ゲーミング弊社！

こ、これは、流れるゲーミング弊社！

ゲームボーイカラーの起動画面みたいでカッコいいですね！

その場で光るタイプ

<style>
  .gaming {
    /* アニメーションの長さ */
    animation: gaming 2s linear infinite;
  }
  @keyframes gaming {
    /* 色の指定 */
    0% { background-color: Magenta; }
    33% { background-color: yellow; }
    66% { background-color: Cyan; }
    100% { background-color: Magenta; }
  }
</style>
/* 画像の指定 */
<img class="gaming" src="./ccslogo.png" width="400">

流れるタイプ

<style>
  .gaming {
    /* 横長で虹色を作る */
    background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%;
    animation: gaming 2s linear infinite;
  }
  @keyframes gaming {
    /* backgroundを移動させる */
    100% { background-position-x: 200%; }
  }
</style>
<img class="gaming" src="./ccslogo.png" width="400">

これ、種を明かせば簡単なことで、
光らせたい部分を透過してあるpng画像を配置し、その背景に虹色のアニメーションを置いているだけなんです。

ですので、光ってる画像をコピーしても、ただの画像になってしまいます。

これを使えば、光らせたい部分を透過した画像にCSSを適用するだけで、
超簡単にゲーミング〇〇が作れちゃいますよ！

ゲーミング猫！

ゲーミングナース！

ゲーミング黒子！……いや、虹子？

みなさんも、色んなものを虹色に光らせてみてください。
それでは、さようなら。

• 猫とナースと黒子の画像はフリー写真素材ぱくたそ様より、利用規約に準拠し使用しています。