<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS3简单酷炫的滚动菜单</title>
<meta charset="utf-8" />
<style>
html{height:100%;font-family: 'Roboto Condensed';}
body{min-height:100%; background-image: -webkit-radial-gradient(top, circle cover, #252233 0%, #252233 80%);
background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);} *{margin:0;padding:0;} body{text-align:center;padding:20px 0;} h1{font-size:1.8em;color:#fff;margin-bottom:50px;letter-spacing:-1px;text-transform:capitalize;text-shadow:0 2px 2px rgba(0,0,0,0.6);} /* scroll-menu */
.scroll-menu{background-color:rgba(0,0,0,0.4);border-bottom:1px solid rgba(255,255,255,0.25);box-shadow:0 0 8px rgba(0,0,0,0.4) inset;border-radius:16px;margin:0;padding:0 30px;}
.scroll-menu{display:inline-block;text-align:center;height:50px;overflow:hidden;}
.scroll-menu li a{letter-spacing:-1px;text-decoration:none;text-transform:uppercase;color:#FFF;}
.scroll-menu li{float:left;height:100%;list-style:none;margin:0 30px;}
.scroll-menu li *{display:inline-block;font-size:1.3em;line-height:50px;}
.scroll-menu li a{margin-top:-50px;transition:0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);}
.scroll-menu li a:before{content:attr(data-text);
display:block;color:greenyellow;}
.scroll-menu li a:hover{margin-top:0;}
a{color:yellow}
</style>
</head> <body>
<h1>纯CSS3滚动菜单</h1>
<ul class="scroll-menu">
<li><a data-text='1号' href="#">目录1</a></li>
<li><a data-text="2号" href="#">目录2</a></li>
<li><a data-text="3号" href="#">目录3</a></li>
<li><a data-text="4号" href="#">目录4</a></li>
</ul>
</body>
</html>
|
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。