HTML5+CSS3滑块动画菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5+CSS3滑块动画菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5+CSS3滑块动画菜单</title>
  <style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

</style>

    <style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
html{
  height:100%;
}
body{
  text-align:center;
  background:url('css/bg.jpg')no-repeat;
  	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
  background-position:50% 50%;
  height:100%;
  font-family: 'Open Sans Condensed', sans-serif;
}
body:before {
	content: "";
	
	display: inline-block;
	vertical-align: middle;
}

#menu{
	display: inline-block;
  height:135px;
  width:80%;
	vertical-align: middle;
  white-space: nowrap;
}
#menu li {
position: relative;
z-index: 2;
display: block;
float: left;
width: 15%;
height: 135px;
line-height: 220px;
margin-right: 1.42857%;
white-space: nowrap;
background-position: 50%;
}
.rocket {
background: url('css/rocket-large.png')no-repeat;
margin-left: 1.42857%;
}
.wine{
  background:url('css/wine-large.png')no-repeat;  
}
.burger{
  background:url('css/burger-large.png')no-repeat;
}
.comment{
  background:url('css/comment-large.png')no-repeat;

}
.sport{
  background:url('css/sport-large.png')no-repeat;

}
.earth{
  background:url('css/earth-large.png')no-repeat;  
}
#menu ul{
  position:relative;
}
#menu ul:after{
  content:"";
  display:block;
  clear:both;
}
#menu a{
  color:#D8D8D8;
  text-decoration:none;
  display:block;
  width:100%;
  height:100%;
  text-shadow: 0 -1px 0 #000;
}
#menu li:after {
content: "";
width: 9.5238%;
height: 100%;
position: absolute;
top: 0;
right: -9.5238%;
background: url('css/menu-bg.png');
}
.rocket:before {
content: "";
width: 9.5238%;
height: 100%;
position: absolute;
top: 0;
left: -9.5238%;
background: url('css/menu-bg.png');
border-radius: 5px 0px 0px 5px;
}
.earth:after{
  border-radius:0px 5px 5px 0px;
}
.current{
  position:absolute;
  top:-13px;
  left:8.92857%;
  margin-left: -49px;
  width:95px;
  height:165px;
  -webkit-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-moz-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-o-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
-ms-transition: all 400ms cubic-bezier(.45,1.92,.9,1.54);
transition: all 400ms cubic-bezier(.16,1.23,.87,1.18);
}
.current-back{
  width:100%;
  height:100%;
  position:absolute;
  background:#c39449;
  border-radius:5px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.09);
  border-top: 2px solid rgba(255,255,255,0.1);
}
.top-arrow{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:12px;
  top:13px;
  left:0;
  z-index:2;
}
.top-arrow:before{
  content:"";
  position:absolute;
  width:80%;
  height:10px;
  top:-10px;
  left:10%;
  border-radius:20%;
  box-shadow:0 0 10px black;
}
.top-arrow:after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  top:0px;
  border-top:8px solid #c39449;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  margin-left:-6px;
  left:50%;
}

.bottom-arrow{
  position:absolute;
  overflow:hidden;
  width:100%;
  height:12px;
  bottom:17px;
  left:0;
  z-index:2;
}
.bottom-arrow:before{
  content:"";
  position:absolute;
  width:80%;
  height:10px;
  bottom:-10px;
  left:10%;
  border-radius:20%;
  box-shadow:0 0 10px black;
}
.bottom-arrow:after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  bottom:0;
  border-bottom:12px solid #c39449;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  margin-left:-8px;
  left:50%;
}

.wine:hover ~ .current{
  left: 25.5%;
}
.burger:hover ~ .current{
 left: 42%;
}
.comment:hover ~ .current{  
   left: 58.5%;
}
.sport:hover ~ .current{
  left: 75%;  
}
.earth:hover ~ .current{
  left: 91.1%; 
}
</style>

    <script src="js/prefixfree.min.js"></script>

</head>

<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <nav id="menu">
  <div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
     <ul>
      <li class="rocket"><a href="">Item menu 1</a></li>
      <li class="wine"><a href="">Item menu 2</a></li>
      <li class="burger"><a href="">Item menu 3</a></li>
      <li class="comment"><a href="">Item menu 4</a></li>
      <li class="sport" ><a href="">Item menu 5</a></li>
      <li class="earth"><a href="">Item menu 6</a></li>
  <div class="current">
    <div class="top-arrow"></div>   
    <div class="current-back"></div>
    <div class="bottom-arrow"></div>
  </div>
    </ul>
</nav>
  <script src='js/none.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

/*Fluid menu with transparent icons.----------------------------------------------Designed by Vincent Perhirin.http://www.behance.net/vincentperhirin----------------------------------------------https://twitter.com/One_divhttp://one-div.com <-- CSS3 single element database*/

CSS代码(style.css):

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);html{height:100%;}
body{text-align:center;background:url('http://one-div.com/codepen/menu/bg.jpg')no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;background-position:50% 50%;height:100%;font-family:'Open Sans Condensed',sans-serif;}
body:before{content:"";height:100%;display:inline-block;vertical-align:middle;}
#menu{display:inline-block;height:135px;width:80%;vertical-align:middle;white-space:nowrap;}
#menu li{position:relative;z-index:2;display:block;float:left;width:15%;height:135px;line-height:220px;margin-right:1.42857%;white-space:nowrap;background-position:50%;}
.rocket{background:url('http://one-div.com/codepen/menu/rocket-large.png')no-repeat;margin-left:1.42857%;}
.wine{background:url('http://one-div.com/codepen/menu/wine-large.png')no-repeat;}
.burger{background:url('http://one-div.com/codepen/menu/burger-large.png')no-repeat;}
.comment{background:url('http://one-div.com/codepen/menu/comment-large.png')no-repeat;}
.sport{background:url('http://one-div.com/codepen/menu/sport-large.png')no-repeat;}
.earth{background:url('http://one-div.com/codepen/menu/earth-large.png')no-repeat;}
#menu ul{position:relative;}
#menu ul:after{content:"";display:block;clear:both;}
#menu a{color:#D8D8D8;text-decoration:none;display:block;width:100%;height:100%;text-shadow:0 -1px 0 #000;}
#menu li:after{content:"";width:9.5238%;height:100%;position:absolute;top:0;right:-9.5238%;background:url('http://one-div.com/codepen/menu/menu-bg.png');}
.rocket:before{content:"";width:9.5238%;height:100%;position:absolute;top:0;left:-9.5238%;background:url('http://one-div.com/codepen/menu/menu-bg.png');border-radius:5px 0px 0px 5px;}
.earth:after{border-radius:0px 5px 5px 0px;}
.current{position:absolute;top:-13px;left:8.92857%;margin-left:-49px;width:95px;height:165px;-webkit-transition:all 400ms cubic-bezier(.45,1.92,.9,1.54);-moz-transition:all 400ms cubic-bezier(.45,1.92,.9,1.54);-o-transition:all 400ms cubic-bezier(.45,1.92,.9,1.54);-ms-transition:all 400ms cubic-bezier(.45,1.92,.9,1.54);transition:all 400ms cubic-bezier(.16,1.23,.87,1.18);}
.current-back{width:100%;height:100%;position:absolute;background:#c39449;border-radius:5px;border-bottom:2px solid rgba(0,0,0,0.09);border-top:2px solid rgba(255,255,255,0.1);}
.top-arrow{position:absolute;overflow:hidden;width:100%;height:12px;top:13px;left:0;z-index:2;}
.top-arrow:before{content:"";position:absolute;width:80%;height:10px;top:-10px;left:10%;border-radius:20%;box-shadow:0 0 10px black;}
.top-arrow:after{content:"";position:absolute;width:0;height:0;top:0px;border-top:8px solid #c39449;border-left:6px solid transparent;border-right:6px solid transparent;margin-left:-6px;left:50%;}
.bottom-arrow{position:absolute;overflow:hidden;width:100%;height:12px;bottom:17px;left:0;z-index:2;}
.bottom-arrow:before{content:"";position:absolute;width:80%;height:10px;bottom:-10px;left:10%;border-radius:20%;box-shadow:0 0 10px black;}
.bottom-arrow:after{content:"";position:absolute;width:0;height:0;bottom:0;border-bottom:12px solid #c39449;border-left:8px solid transparent;border-right:8px solid transparent;margin-left:-8px;left:50%;}
.wine:hover ~ .current{left:25.5%;}
.burger:hover ~ .current{left:42%;}
.comment:hover ~ .current{left:58.5%;}
.sport:hover ~ .current{left:75%;}
.earth:hover ~ .current{left:91.1%;}

附件:下载该文件资源,减少时间成本(增值服务)