CSSの画像フィルターを使ったアニメーションの演出 ~Animated skewed panes~

CSSの画像フィルターを使ったアニメーションの演出 ~Animated skewed panes~
このエントリーをはてなブックマークに追加
PR

Animated skewed panes

See the Pen Animated skewed panes by Terry Mun (@terrymun) on CodePen.

http://codepen.io/terrymun/pen/jeCuv

CSSだけで作られたものです
CSSの画像フィルターのblurとgrayscale、contrasをつかったものを画像の一部にかかるようにして
その要素をアニメーションで自動的に動くようにしたものです

このまま一つのサイトのトップページに使えそうです
画像フィルターはwebkit系のブラウザで動作します

Chromeやoperaで確認できます
アニメーションが止まっている場合は、codepenの埋め込みのRERUNを押すか、リンク先で御覧ください

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)