CSSのmix-blend-modeを用いた表現

概要

ちょっとCSSのmix-blend-modeを用いた表現をいろいろ考えてみる。
mix-blend-modeを使用するとPhotoshopで言うところの描画モードのような表現を行うことができる。
これは夢が広がる。。。

試し

ローディングとかで使えそうな表現

See the Pen mix-blend-mode by Yuji Arai (@arahell) on CodePen.


ちょっと色がどきついけどRGBそれぞれの円を用意して少し中心座標をずらして回転させることで様々な重なり方をして色の変化が起きる。

写真などに重ねてアニメーションさせる

See the Pen mix-blend-mode by Yuji Arai (@arahell) on CodePen.


アニメーションさせることによっておもしろい表現ができそう。