您的位置：首页 > Web前端 > CSS

css3创建一个动态的立体的导航栏

2015-01-20 15:41 190 查看

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" href="

http://www.w3cplus.com/demo/css3/base.css">
<style>

body{

background: #ebebeb;

}

.nav{

width:560px;

height: 50px;

font:bold 0/50px Arial;

text-align:center;

margin:40px auto 0;

background: #f65f57;

/*制作圆*/

border-radius:8px;

/*制作导航立体风格*/

box-shadow:0 5px 1px 0 red;

}

.nav a{

display: inline-block;

-webkit-transition: all 0.2s ease-in;

-moz-transition: all 0.2s ease-in;

-o-transition: all 0.2s ease-in;

-ms-transition: all 0.2s ease-in;

transition: all 0.2s ease-in;

}

.nav a:hover{

-webkit-transform:rotate(10deg);

-moz-transform:rotate(10deg);

-o-transform:rotate(10deg);

-ms-transform:rotate(10deg);

transform:rotate(10deg);

}

.nav li{

position:relative;

display:inline-block;

padding:0 16px;

font-size: 13px;

text-shadow:1px 2px 4px rgba(0,0,0,.5);

list-style: none outside none;

}

/*使用伪元素制作导航列表项分隔线*/

.nav li:before{

content:"";

position:absolute;

top:14px;

height:25px;

width:1px;

left:-1px;

background-image:linear-gradient(to bottom,#f65f57,#fff,#f65f57);

}

/*删除第一项和最后一项导航分隔线*/

.nav li:first-child:before{

background:none;

}

.nav a,

.nav a:hover{

color:#fff;

text-decoration: none;

}

</style>

</head>

<body>

<ul class="nav">

<li><a href="">Home</a></li>

<li><a href="">About Me</a></li>

<li><a href="">Portfolio</a></li>

<li><a href="">Blog</a></li>

<li><a href="">Resources</a></li>

<li><a href="">Contact Me</a></li>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航