
これって飛び出すぎ???非常にインパクトのあるCSS3のリストメニューです。これだけ動けば目立つこと間違いなしですね!
思いっきり飛び出してくるリンクメニュー
Menu item 1
Menu item 2
Menu item 3
HTMLサンプル
<a href="/" class="menu-item">Menu item 1</a> <a href="/" class="menu-item">Menu item 2</a> <a href="/" class="menu-item">Menu item 3</a>
CSS3サンプル
#main-content { padding-top: 10px; } /* Shorthand version */ .menu-item { position: relative; display: inline-block; border: 1px dashed #000; padding: 10px; background: #ffffa2; height: 20px; opacity: 0.3; text-decoration: none; /* Firefox */ -moz-transition: all 1s ease; /* WebKit */ -webkit-transition: all 1s ease; /* Opera */ -o-transition: all 1s ease; /* Standard */ transition: all 1s ease; } .menu-item:hover { opacity: 1; /* Firefox */ -moz-transform: scale(2) rotate(30deg) translate(50px); /* WebKit */ -webkit-transform: scale(1.2) rotate(30deg) translate(50px); /* Opera */ -o-transform: scale(2) rotate(30deg) translate(50px); /* Standard */ transform: scale(2) rotate(30deg) translate(50px); z-index: 1000; }
一言
これだけ存在感があるとグローバルメニューには少し面倒くさい感じになそうです・・・・がワンポイントとしては使えますね。むしろ目を思いっきり引くことができるので、活用していきたいCSS3ですね。
コメント
コメントをお寄せください。
コメントの投稿
トラックバックURL: http://select.rash.jp/css/329/trackback/