hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

-webkit-box-reflectを繰り返し適用する試み

-webkit-box-reflectは今や忘れられつつある技という感じで、古くはApple製品の反射を作り出すために使われていた(要出典)。
反射を繰り返し適用できると、1つの画像からおしゃれなパターンを作れるのではと思って練習してみた。

アニメーションGIFに対して適用する

以下のページに置いてある画像は1つだけで、あとは反射させて作っている。 Google Chromeでみると、キビキビ動いてるのは1つだけで、横に行くとだんだん動きが遅くなっていく、とか、上に反射したところはまだ動いているけど、それ以降は動かなくなる、とか、面白い動きをした。
Safariでみるとすべての画像がちゃんと動いていた。
https://fire-plutonium.glitch.me
glitch.com

YouTube貼り付けに対して適用する

YouTube動画を同じ形で貼ってみるとちゃんと動いて、ちゃんと動くので万華鏡のような効果が得られた。
glitch.com

YouTube貼り付けに対して適用し、CSSアニメーションで回転させる

反射もぐるぐる回っていて偉い。
glitch.com


60度ごとの反射を作れるとよりよかったけど、そうすると、ひたすら反射ではだめで、もととなる要素をを複数出す必要があるような気がしている。
もし今後、ブラウザを使って愉快な絵を出したいことがあったら、こういう効果があると単純なパターンを反復させることで愉快な絵を出せて良いのではないでしょうか。