2016年を代表する鮮やかな配色に、オーバー気味のドロップシャドウが美しい、ボタン・ホバー用エフェクト。
See the Pen Fancy Button by Mohsen Khakbiz (@Mohsen-Khakbiz) on CodePen.
Big Fancy 3D Rotating SVG Button
マウスホバーに合わせて、立体的に回転します。
See the Pen Big Fancy 3D Rotating SVG Button by J Scott Smith (@jscottsmith) on CodePen.
青白く光る文字テキストや、放射線上に広がるライティングが魅力的なホバーエフェクト。
See the Pen Blue light button by Toshiyuki TAKAHASHI (@gau) on CodePen.
Collection of Cool Button Hover Effects
HTML/CSSのみで作成された、オリジナル性の高いボタン用ホバーエフェクトを、合計9種類用意しています。
See the Pen Collection of Cool Button Hover Effects by Carlos1162 (@Carlos1162) on CodePen.
SVG ファイルを利用せずに、CSSのみでアニメーション付きのボーダーラインを演出します。
See the Pen Borders on hover without SVG by Adrian Crabtree (@imacrab) on CodePen.
タイトルのままですが、Facebookでのリアクション機能を完全再現しています。
See the Pen Facebook Reactions (Mother’s day sneak peak) by Carlos Medina (@medinnna) on CodePen.
表示されるたびにユニークなアニメーションを追加した、SVG アイコン素材が揃っています。
See the Pen SVG Animated icons by kittons (@airnan) on CodePen.
各フォント毎にアニメーションを設定することで、滑らかなストローク・アニメーションを表現しています。
See the Pen SVG Stroke Animation by Toshiyuki TAKAHASHI (@gau) on CodePen.
こちらも波型SVGラインに、シンプルな@keyframesを利用して、マイクロインタラクションを追加します。
See the Pen Animations! by Varun Vachhar (@winkerVSbecks) on CodePen.
アニメーションの滑らかさに定評のするプラグインを利用した、実践で参考にしたいスニペット。
See the Pen Logo by Marco Barría (@fixcl) on CodePen.
写真加工を行ったときのビフォーとアフターを、マウスカーソルに反応するスライダーで適用できます。
See the Pen Before & After by Bryan Stoner (@mimoduo) on CodePen.
風景画を立体的な粒子状でとらえた、未来を感じるアート・デザイン作品のひとつ。ズームアップすると、すごいです。
See the Pen Pixel Particles by Szenia Zadvornykh (@zadvorsky) on CodePen.
ぬるりと動くモーフィング・アニメーションを採用した、CSSのみでスタイリングされたページ送りで、美しいグラデーション背景もポイント。
See the Pen Page control animations by Giuseppe Bandiera (@giuband) on CodePen.
カラフルなドットが大小にサイズを変え点滅する、CSSで作成されたローディング・アニメーション。
See the Pen #cssloop 003 by Matteo Belfiore (@heartbox) on CodePen.
スポーツカーがドリフト走行している様子を、ローディング画面に活用しています。
See the Pen SVG Car Drift Loader by Chris Gannon (@chrisgannon) on CodePen.
CSSスタイリングのみで表現された、本物そっくりのiPhone 6。
See the Pen iPhone 6 mockup | CSS only by Håvard Brynjulfsen (@havardob) on CodePen.
各キーボードを入力することで、バケツをつかったドラムマシーンで遊びことができます。
See the Pen SVG Animated Bucket Drums by Spencer Putnam (@sgput) on CodePen.
なんとCSSのスタイリングのみで作成されたアニメーションは、中毒性のあるコミカルな動きが素敵です。
See the Pen CSS Wrestler by Pavel (@drfisher) on CodePen.
