纯CSS3实现的动感菜单效果

程序员永伟技术 2022年11月7日

0 收藏 995 点赞 546 浏览 1731 个字

1. [代码] 纯CSS3实现的动感菜单效果
<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>纯CSS3实现的动感菜单效果 – 模板巴士www.mobanbus.cn</title>

<style type=”text/css”>

* { margin:0;
padding:0;
}

html {height: 100%;}

body{
position: relative;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));

}

.navbox {
position: relative;
float: left;
}

ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: 100px;
left: 100px;
padding: 60px 0 60px 0;
background: url(images/shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
}

li {
margin: 5px 0 0 0;
}

ul.nav li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb url(images/border.png) no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
background: #ebebeb url(images/border.png) no-repeat;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}

</style>

</head>

<body>

<div class=”navbox”>
<ul class=”nav”>
<li><a href=””>XHTML</a></li>
<li><a href=””>C++</a></li>
<li><a href=””>Mootools</a></li>
<li><a href=””>HTML5</a></li>
<li><a href=””>CSS</a></li>
<li><a href=””>jQuery</a></li>
<li><a href=””>Ajax</a></li>
<li><a href=””>PHP</a></li>
<li><a href=””>Perl</a></li>
</ul>http://www.huiyi8.com/ppt/
</div>ppt模板

<div class=”navbox”>
<ul class=”nav”>
<li><a href=””>XHTML</a></li>
<li><a href=””>HTML5</a></li>
<li><a href=””>CSS</a></li>
<li><a href=””>jQuery</a></li>
<li><a href=””>Ajax</a></li>
<li><a href=””>PHP</a></li>
</ul>
</div>

<div class=”navbox”>
<ul class=”nav”>
<li><a href=””>XHTML</a></li>
<li><a href=””>HTML5</a></li>
<li><a href=””>CSS</a></li>
</ul>
</div>

</body>
</html>