文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯