温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS3怎么实现银灰色动画效果的导航菜单

发布时间:2021-08-04 17:59:37 来源:亿速云 阅读:134 作者:chen 栏目:web开发

本篇内容介绍了“CSS3怎么实现银灰色动画效果的导航菜单”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

运行效果截图如下:

CSS3怎么实现银灰色动画效果的导航菜单

在线演示地址如下:

http://demo.jb51.net/js/2015/css3-color-flash-style-nav-menu-codes/

具体代码如下:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3动画效果的导航菜单</title>
<style>
*{
 margin:0;
 padding:0;
}
html{
 background:url('images/bg_tile.jpg') #333d43;
}
body{
 background:url('images/bg_head.jpg') repeat-x top center, url('images/bg_vert.jpg') repeat-x;
 min-height:500px;
 font:14px/1.3 'Segoe UI',Arial, sans-serif;
 color:#888;
 padding:10px;
}
.fancyNav{
 overflow: hidden;
 display: inline-block;
}
.fancyNav li{
 background-color: #f0f0f0;
 background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
 background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
 background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
 background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
 background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
 border-right: 1px solid rgba(9, 9, 9, 0.125);
 box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
 -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
 -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
 position:relative;
 float: left;
 list-style: none;
}
.fancyNav li:after{
 content:'.';
 text-indent:-9999px;
 overflow:hidden;
 position:absolute;
 width:100%;
 height:100%;
 top:0;
 left:0;
 z-index:1;
 opacity:0;
 background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
 background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
 background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
 background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
 background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
 box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
 -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
 -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
 -moz-transition:0.25s all;
 -webkit-transition:0.25s all;
 -o-transition:0.25s all;
 transition:0.25s all;
}
.fancyNav li:first-child{
 border-radius: 4px 0 0 4px;
}
.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
 box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
 -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
 -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
 border-radius:4px 0 0 4px;
}
.fancyNav li:last-child{
 border-radius: 0 4px 4px 0;
}
.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
 box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
 -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
 -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
 border-radius:0 4px 4px 0;
}
.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
 opacity:1;
}
.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
 opacity:0;
}
.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
 opacity:1 !important;
}
.fancyNav li a{
 color: #5d5d5d;
 display: inline-block;
 font: 20px/1 Lobster,Arial,sans-serif;
 padding: 12px 35px 14px;
 position: relative;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
 z-index:2;
 text-decoration:none !important;
 white-space:nowrap;
}
.fancyNav a.homeIcon{
 background:url('images/home.png') no-repeat center center;
 display: block;
 overflow: hidden;
 padding-left: 12px;
 padding-right: 12px;
 text-indent: -9999px;
 width: 16px;
}
h2,h3{
 color: #fff;
 line-height: 1;
 background-color: #222;
 font-family: 'Segoe UI Light','Segoe UI',Arial,sans-serif;
 font-weight: normal;
 margin: 0 auto;
 position: absolute;
 left: 50%;
 margin-left: -446px;
}
h2{
 font-size: 36px;
 padding: 5px 15px 10px;
 top: 0;
}
h3{
 font-size: 14px;
 padding: 4px 13px 9px 11px;
 top: 51px;
}
header{
 display:block;
 margin-top:50px;
 position:relative;
}
nav{
 display: block;
 margin: 300px auto 0;
 text-align: center;
 width: 600px;
}
footer{
 color: #BBBBBB;
 font-size: 15px;
 line-height: 1.6;
 padding: 60px 20px 0;
 text-align: center;
 display:block;
}
footer b{
 color: #888888;
 display: block;
 font-size: 10px;
 font-weight: normal;
}
a, a:visited {
 text-decoration:none;
 outline:none;
 color:#54a6de;
}
a:hover{
 text-decoration:underline;
}
</style>
 <!-- Including the Lobster font from Google's Font Directory -->
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />  
 <!-- Enabling HTML5 support for Internet Explorer -->
 <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>
<body>
 <nav>
  <ul class="fancyNav">
   <li id="home"><a href="#home" class="homeIcon">Home</a></li>
   <li id="news"><a href="#news">News</a></li>
   <li id="about"><a href="#about">About us</a></li>
   <li id="services"><a href="#services">Services</a></li>
   <li id="contact"><a href="#contact">Contact us</a></li>
  </ul>
 </nav>
</body>
</html>

“CSS3怎么实现银灰色动画效果的导航菜单”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI