css3实现带有简单动画按钮导航
2012-11-15 16:03:38 来源:WEB开发网核心提示:}.nav2 a strong, .nav2 a em {cursor:pointer;padding:4px 8px;font-weight:bold;font-style:normal;display:block;-webkit-transition:all 200ms ease-out;-moz-transiti
}
.nav2 a strong, .nav2 a em {
cursor:pointer;
padding:4px 8px;
font-weight:bold;
font-style:normal;
display:block;
-webkit-transition:all 200ms ease-out;
-moz-transition:all 200ms ease-out;
-o-transition:all 200ms ease-out;
transition:all 200ms ease-out;
}
.nav2 a strong {
position:relative;
top:0;
left:0;
color:#000;
background:#fff;
}
.nav2 em {
position:absolute;
top:100%;
background:#000;
color:#fff;
}
.nav2 a:hover strong {
top: -100%;
}
.nav2 a:hover em {
top: 0;
}
</style>
.nav2 a strong, .nav2 a em {
cursor:pointer;
padding:4px 8px;
font-weight:bold;
font-style:normal;
display:block;
-webkit-transition:all 200ms ease-out;
-moz-transition:all 200ms ease-out;
-o-transition:all 200ms ease-out;
transition:all 200ms ease-out;
}
.nav2 a strong {
position:relative;
top:0;
left:0;
color:#000;
background:#fff;
}
.nav2 em {
position:absolute;
top:100%;
background:#000;
color:#fff;
}
.nav2 a:hover strong {
top: -100%;
}
.nav2 a:hover em {
top: 0;
}
</style>
支持的浏览器Firefox, Chrome, Opera and Safari,对于ie不支持transition,
更多精彩
赞助商链接