with the flow

WEBプログラマを目指すWEBデザイナーが書き綴る開発日誌のようなもの

CSSだけでつくる、アニメーションするネオンキューブ

久しぶりに、ブラウザへの実装がだいぶ進んできたCSS3のfilterプロパティを使って、
勉強がてら1作品作ってみることにしました。

できたのがこちら。

See the Pen CSS3 Neon Cubes by hiro (@githiro) on CodePen.

JavaScriptは使わず、動きと回転はanimationプロパティ、
おもちみたいにくっついたり、離れたりする動きはfilterプロパティのcontrast, blur, brightnessを使っています。

基本は、色違いの正方形をクルクル回しながら動かしてるだけです。


blur(ぼかし)をするだけだと、オブジェクト同士が近づいても
ボケの部分が重なるのみ↓ですが、
f:id:mhstid:20141109180959p:plain


contrastを指定することで、blurされた部分が重なった時にスライムみたいにくっつく処理が適用され、
brightnessを指定することで明暗がよりくっきり、重なった部分がオーバーレイ処理されて明るくなっています。

.stage {
  @include filter(blur(50px) brightness(1.4) contrast(40));
}

f:id:mhstid:20141109181012p:plain

応用次第でいろいろな処理が作れそうですね!