4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

cssのanimationでサイケ感を出す

Last updated at Posted at 2018-08-22

特に難しいことはなく、
filter:hue-rotate(0deg) の値を @keyframes で変更すればOK

特定要素のみでも良いし、ページ全体に適応すればかなり気持ちが悪くなる

実装例 https://codepen.io/ynhrrr/pen/yxyqwG

body {
  animation: huerotate 3s linear infinite;
}
@keyframes huerotate{
  from{
    filter:hue-rotate(0deg);
  }
  to{
    filter:hue-rotate(360deg);
  }
}

filter:invert(0%) の値を動かせばチカチカとした点滅も出来る。

マウスオーバーエフェクトや、メインビジュアルなどでも使えるかもしれないし、ネットアートなどにも適応出来るかも
(:hover に transition-duration 設定しておけば必要ないかもしれないが)

4
2
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
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?