CSS3动态效果滚动菜单

最新推荐文章于 2024-04-05 21:12:09 发布

weixin_30794851

最新推荐文章于 2024-04-05 21:12:09 发布

阅读量337

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/youtianxia/p/3955444.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3动态效果滚动菜单丨</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {margin:0;padding:0;}
ul,li {list-style:none;font-size:12px;font-family:"microsoft YaHei",verdana;}
nav{}
nav ul{display:box;display:-webkit-box;}
nav ul li{box-flex:1;-webkit-box-flex:1;}
nav ul li a{display:block;text-decoration:none;position:relative;overflow:hidden;height:30px;}
nav ul li a:hover strong{top:0;opacity:1;}
nav ul li a:hover span{top:30px;opacity:0;}
nav ul li span{background-color:#FFCC00;}
nav ul li strong{top:-30px;background-color:#FF6600;opacity:0;}
nav ul li span,nav ul li strong{position:absolute;height:30px;width:100%;text-align:center;line-height:30px; /*核心*/-webkit-transition:all 500ms linear;}
/**拓展**/
nav ul li:nth-child(2n) strong {top:30px;}
nav ul li:nth-child(2n) a:hover span {top:-30px;}
</style>
</head>
<body>
<nav>
    <ul>
        <li><a href=""><span>Me</span><strong>我</strong></a></li>
        <li><a href=""><span>You</span><strong>你</strong></a></li>
        <li><a href=""><span>Index</span><strong>首页</strong></a></li>
        <li><a href=""><span>Index</span><strong>首页</strong></a></li>
        <li><a href=""><span>Index</span><strong>首页</strong></a></li>
        <li><a href=""><span>Index</span><strong>首页</strong></a></li>
        <li><a href=""><span>Index</span><strong>首页</strong></a></li>
    </ul>
</nav>
</body>
</html>