2013.03.15
CSSだけでアニメーション リボン メニュー
CSS3 ・ アニメーション ・ サンプルあり ・ メニューCSS3のtransitonsとCSS2の疑似クラスを使って作るリボンの形をしたアニメーションのメニューです。

Attention!!
対応ブラウザについて: IE8,IE9はCSS3のtransitonsをサポートしてないのでアニメーションはされません。IE7以下ではCSS2の疑似クラスがサポートされてないためうまく表示されません。
HTMLのソース
<div class="ribbon"> <a href="#"><span>Home</span></a> <a href="#"><span>About</span></a> <a href="#"><span>Services</span></a> <a href="#"><span>Contact</span></a> </div>
CSSを使ってリボンを作るのでHTMLはとってもシンプルです。
CSSのソース
両端の切れ込み
.ribbon:after, .ribbon:before { margin-top:8px; content: ""; float:left; border:20px solid #EC8E9E; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; }
疑似クラスの:before、:afterを使います。太いボーダーを設定し、ブランク(空っぽ)のcontentを作ります。
ボーダーで1つだけカラーをtransparent(透明)にします。
すると三角形が一部抜けて、リボンの切れ込みみたいになります。
リンク
.ribbon a:link, .ribbon a:visited { color:#666; text-decoration:none; float:left; height:48px; overflow:hidden; font-weight:bold; }
リンク部分と両端の切れ込み部分はすべてfloat:leftにすることでレイアウトが崩れません。
後述するspanの下に、リボンの折り目部分があるのでoverflow:hiddenで隠します。
アニメーション部分
.ribbon span { background:#EC8E9E; display:inline-block; line-height:40px; padding:0 36px; margin-top:8px; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#fccfd6; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:40px; left:0; border-right:8px solid #9B8651; border-bottom:8px solid #EC8E9E; } .ribbon span:after { content: ""; position:absolute; top:40px; right:0; border-left:8px solid #9B8651; border-bottom:8px solid #EC8E9E; }
リボンの(上下方向の)中央に文字がくるようにするために、line-heightをリボンの高さを同じにし、上下のpaddingを0にします。
これでfont-faceやfont-size、font-weightが変わっても(上下の)中央に文字がくるようになります。
margin-topの大きさの分上にリボンが動きます。
span:before span:afterはリボンの折り目部分です。
通常時は先述したoverflow:hiddenで隠れていますが、ホバー時にアニメーションされたときに見えるようになります。
参考サイト
このリボンメニューはCSSのボーダーの特徴をうまく使っていますね。
CSSのボーダーをうまく使うと三角形も作れます。
こちら(CSSで三角形を作る方法)に書きました。
2013.03.19 7:31 PM
[…] HTMLのソース <div class=”ribbon”> <… >>CSSだけでアニメーション リボン メニュー | Ri-mode Rainbow Author: […]