CSS3なら簡単！ アニメーションするリングメニューを作る | CSS-EBLOG

CSS3なら簡単！ アニメーションするリングメニューを作る カテゴリ：CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今

[deglingos]

これは面白そう！どこかで使えないかな。。

[lordkf]

S剣D説2を彷彿とさせるアレ。

[psn]

リングメニュー

[gadgetshop]

リングメニュー

[sorausa1124]

メニュー

[chimantare]

円のアニメーションのメニュー

[kkeisuke]

transform-origin

[site159]

かっけー　こんちくしょう

[warriorking]

CSS3なら簡単！ アニメーションするリングメニューを作る | CSS-EBLOG

[asiamoth]

ゲームっぽいデザインのメニューを再現。一見すると複雑なことをやっていそうなのに、意外と簡単に実現できる。 SASS の mixin を利用すれば、さらに楽だなー。

[edo_m18]

CSS3はアプリライクなことが簡単にできるから楽しいｗ

[j7400157]

基点から考えるとわかりやすいのね。

[sadah]

基点から考えるとわかりやすいのね。