純CSS3實(shí)現(xiàn)帶動(dòng)畫(huà)效果導(dǎo)航菜單無(wú)需js

發(fā)布時(shí)間：2013-09-27 16:07:29 作者：佚名

html5+css3的出現(xiàn)給前端開(kāi)發(fā)者提供了更多的可能性，以前很多只能通過(guò)JS實(shí)現(xiàn)的效果用純粹的css3就能實(shí)現(xiàn)了，下面有個(gè)不錯(cuò)的示例，大家可以學(xué)習(xí)下

隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁(yè)能表現(xiàn)的東西越來(lái)越多。由最開(kāi)始單純的文字和鏈接構(gòu)成的網(wǎng)頁(yè)，到后來(lái)的表格布局，再到div+css模式，現(xiàn)在發(fā)展到了html+css3。網(wǎng)頁(yè)能表達(dá)的東西越來(lái)越多，css3興起已經(jīng)很多年了，不多由于國(guó)內(nèi)網(wǎng)站要求對(duì)IE的兼容，html5+css3的發(fā)展很緩慢。

html5+css3的出現(xiàn)給前端開(kāi)發(fā)者提供了更多的可能性，以前很多只能通過(guò)JS實(shí)現(xiàn)的效果用純粹的css3就能實(shí)現(xiàn)了。

下面介紹一個(gè)博主在css3學(xué)習(xí)過(guò)程中寫(xiě)的一個(gè)純css3實(shí)現(xiàn)的帶動(dòng)畫(huà)效果的導(dǎo)航菜單。

下面是效果圖：

查看示例（請(qǐng)?jiān)谥С謈ss3的瀏覽器中查看效果，最新版的chrome瀏覽器下效果最佳。）

純css動(dòng)畫(huà)導(dǎo)航菜單下載

話不多說(shuō)，直接貼源碼：

css:

復(fù)制代碼

代碼如下:

*{
margin:0;
padding:0;
}
html{
background: #333d43;
}
footer a{
color:#fff;
text-decoration:none;
}
footer a:hover{
text-decoration:underline;
}
body{
min-height:500px;
font:14px/1.3 'Microsoft YaHei';
color:#888;
padding:10px;
}
nav{
position:relative;
border-radius:5px;
display:block;
margin: 30px auto 0;
width:800px;
background:#fff;
border-radius:5px;
box-shadow: 1px 1px 33px #fff;
}
.homeIcon{
position:relative;
display:block;
width:50px;
height:40px;
}
#home:hover > a .home-top{
border-bottom:10px #fff solid;
}
#home:hover > a .home-top-r{
background:#fff;
}
#home:hover > a .home-door-l{
background:#fff;
}
#home:hover > a .home-door-r{
background:#fff;
}
.home-top{
position:absolute;
left:15px;
top:0px;
border-left:10px transparent solid;
border-right:10px transparent solid;
border-top:10px transparent solid;
border-bottom:10px #C2C2C2 solid;
box-shadow: 0px 1px 0px #000;
width:0px;
height:0px;
}
.home-top-r{
position:absolute;
left:27px;
top:13px;
width:4px;
height:6px;
background:#C2C2C2;
}
.home-door-l{
position:absolute;
left:18px;
top:20px;
width:5px;
height:6px;
background:#C2C2C2;
}
.home-door-r{
position:absolute;
left:27px;
top:20px;
width:5px;
height:6px;
background:#C2C2C2;
}
.fancyNav{
display:block;
position:relative;
border-radius:5px;
background-image: linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
background-image: -webkit-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
background-image: -moz-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
background-image: -o-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%);
background-image: -ms-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%); }
.fancyNav li{
position:relative;
height:40px;
line-height:40px;
padding:0px 20px;
display:block;
float:left;
border-right:1px #000 solid;
}
.fancyNav li:hover{
background:rgba(10, 5, 5, 0.2);
}
.fancyNav li ul{
position:absolute;
display:none;
left:0px;
overflow:hidden;
}
.fancyNav li:hover>ul{
display:block;
animation:animated .5s ease 0s 1 alternate;
-webkit-animation:animated .5s ease 0s 1 alternate;
-moz-animation:animated .5s ease 0s 1 alternate;
-ms-animation:animated .5s ease 0s 1 alternate;
-o-animation:animated .5s ease 0s 1 alternate;}
@keyframes animated
{
0% {transform: rotate(0deg);opacity:0;}
100% {transform: rotate(-360deg);opacity:1;}
}
@-webkit-keyframes animated
{
0% {-webkit-transform: rotate(0deg);opacity:0;}
100% {-webkit-transform: rotate(-360deg);opacity:1;}
}
@-moz-keyframes animated
{
0% {-moz-transform: rotate(0deg);opacity:0;}
100% {-moz-transform: rotate(-360deg);opacity:1;}
}
@-o-keyframes animated
{
0% {-o-transform: rotate(0deg);opacity:0;}
100% {-o-transform: rotate(-360deg);opacity:1;}
}
@-ms-keyframes animated
{
0% {-ms-transform: rotate(0deg);opacity:0;}
100% {-ms-transform: rotate(-360deg);opacity:1;}
}
.fancyNav li ul li
{
display:block;
margin:0px;
border-top: 1px solid #989898;
border-bottom: 1px solid #343434;
background:rgba(10, 5, 5, 0.45);
height:30px;
line-height:30px;
width:60px;
}
.fancyNav li ul li:hover{
background:rgba(10, 5, 5, 0.9);
}
li a{
color:#fff;
text-decoration:none;
text-shadow: 0px 1px 0px #000
}
input[type=search] {
-webkit-appearance: none;
outline: none;
}
#searchform {
position: absolute;
rightright: 10px;
bottombottom: 6px;
z-index: 100;
width: 160px;
}
#searchform #s {
outline:none;
width: 80px;
float: rightright;
background: #fff;
border: none;
padding: 6px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-transition: width .7s;
-moz-transition: width .7s;
transition: width .7s;
}
#searchform #s:focus {
width: 150px;
}
footer {
margin-top:400px;
color: #BBBBBB;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display: block;
}

html:

復(fù)制代碼

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>

<link rel="stylesheet" href="assets/css/styles.css" />

<link rel="stylesheet" />


</head>
<body>
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
<nav>
<ul class="fancyNav">
<li id="home"><a href="#home" class="homeIcon"><div class="home-top"></div><div class="home-top-r"></div><div class="home-door-l"></div><div class="home-door-r"></div></a></li>
<li id="news"><a href="#news">前端設(shè)計(jì)</a>
<ul>
<li><a href="">HTML5</a></li>
<li><a href="">CSS3</a></li>
<li><a href="">JQUERY</a></li>
</ul>
</li>
<li id="about"><a href="#about">編程語(yǔ)言</a>
<ul>
<li><a href="">PHP</a></li>
<li><a href="">JAVA</a></li>
<li><a href="">wordpress</a></li>
<li><a href="">CodeIgniter</a></li>
</ul>
</li>
<li id="services"><a href="#services">生活</a>
</li>
<li id="contact"><a href="#contact">留言板</a>
</li>
<form id="searchform">
<input type="search" id="s" placeholder="Search">
</form>
<div style="display:block;clear:both;"></div>
</ul>
</nav>
<footer>Tutorial by   <a target="_blank">sanyecao</a>  ©2013</footer>
</body>
</html>

Tag：CSS3 帶動(dòng)畫(huà) 導(dǎo)航菜單

相關(guān)文章

原生js仿新浪游戲頻道下拉二級(jí)導(dǎo)航菜單列表
一款原生js仿新浪游戲頻道下拉二級(jí)導(dǎo)航菜單列表代碼
2014-02-27
比較實(shí)用的無(wú)限級(jí)CSS+JS導(dǎo)航菜單兼容IE6
無(wú)限級(jí)CSS+JS導(dǎo)航菜單，兼容IE6下li不支持hover偽類的BUG
2013-10-18
jQuery實(shí)現(xiàn)的導(dǎo)航菜單效果，完全模仿flickr的橫向?qū)Ш讲藛?，帶有二?jí)菜單，菜單顯示帶有過(guò)度效果
2012-09-19

基于JS來(lái)實(shí)現(xiàn)專業(yè)的多級(jí)下拉導(dǎo)航菜單的效果

一個(gè)專業(yè)的多級(jí)導(dǎo)航菜單，純JS實(shí)現(xiàn)，整體風(fēng)格簡(jiǎn)潔大方，適合正規(guī)的專業(yè)網(wǎng)站使用

2012-09-06

jSlickmenu菜單，CSS3結(jié)合jQuery實(shí)現(xiàn)的圖片導(dǎo)航菜單

jSlickmenu是一款基于jQuery和CSS3技術(shù)相結(jié)合的圖片導(dǎo)航菜單，該菜單的特點(diǎn)是利用旋轉(zhuǎn)和帶陰影的圖片作為導(dǎo)航項(xiàng)，當(dāng)鼠標(biāo)移到導(dǎo)航時(shí)，相應(yīng)的圖片高亮顯示。

2012-07-20