よく見る波打つようなエフェクト。
SVGアニメーションで再現するんじゃなくて、cssのみでそれっぽく見せる。
See the Pen
波打つように見える回転する円 by masayuki abe (@masayuki-abe)
on CodePen.
仕組みとしては、border-dadiusで作った楕円を回転させることで波打っているように見せる、となる。
一つの楕円を回転させるだけでもそれっぽく見せることができるけど、
2つの楕円を重ねて、mix-blend-mode: multiply;で色を重ねてあげるとちょっと面白くなる。
背景色を指定せず、borderだけで表現しても良いと思う。
ポイントは、transform-originで回転の中心点をアニメーションで少しずらしてあげること。
これより、波打っているように見せることができる。
SVGでゴリゴリっとやるところまでは行かないけれど、メインビジュアルとかでなんか一工夫ほしいときには
使えるんじゃないかなーと思ってる。水系のサイトとか、イノベーションとかって謳ってるサイトとか。
IE11は非検証だけど、動くんじゃないかなー、と勝手に思ってる。
mix-blend-modeは使えないけれど、そこはopacityでそれっぽく。
↧