特に難しいことはなく、
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 設定しておけば必要ないかもしれないが)