CSS3でメニュー下線(上線)のアニメーション

Pocket

サンプル

HTML

[html]
<p><a href="#">HOME</a></p>
[/html]

CSS

[css]
p {background-color:#000;}
a {
display:block;
width:100px;
height:60px;
line-height:60px;
color:#F90;
text-align:center;
text-decoration:none;
}
a:after {
display:block;
content:" ";
width:0;
height:3px;
background-color:#F90;
position:relative;
top:-16px;
left:50px;
-webkit-transition:all ease 0.3s;
}
a:hover:after {
background-color:#F90;
left:0px;
width:100px;
}
[/css]

CSS3アニメーションでborder風

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください