使用CSS3实现下图的导航菜单效果

 <!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>CSS制作立体导航</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 7px 0 #ba4a45;
             }
             .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,
             .nav li::after{
               content:"";
               position:absolute;
               top:14px;
               height: 25px;
               width: 1px;
             }
             .nav li::after{
               right: 0;
               background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
               background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
               background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
               background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
               background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
             }
             .nav li::before{
               left: 0;
               background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
               background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
               background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
               background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
               background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
             }
             /*删除导航第一个导航项左边的分隔线*/
             .nav li:first-child::before{
               background: none;
             }
             /*删除导航最后一个导航右边的分隔线*/
             .nav li:last-child::after{
               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>

CSS3特效----制作立体导航栏菜单的更多相关文章

  1. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...

  3. css3中做3D导航栏

    看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...

  4. vue+el-menu实现路由刷新和导航栏菜单状态保持（局部刷新页面）

    一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...

  5. Bootstrap入门Demo——制作路径导航栏

    今天在在群里聊天的时候看到一仅仅程序猿发了一张用Bootstrap做的界面.感觉挺好看.然后去官网看了下组件.发现都挺美丽的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源代 ...

  6. html+css 制作简易导航栏

    二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

  7. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  8. CSS3制作立体导航

    <ul class="nav"> <li><a href="">首页</a></li> <li ...

  9. CSS3特效----制作3D旋转照片展示区

    任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204, ...

随机推荐

  1. php运算时默认的类型转换

    php属于弱类型语言,使用数据时无需指定其数据类型.对于学C语言入门的我,刚刚接触时感觉很神奇,但是随之而来的也有烦恼. 总结一下php中默认的类型转换,按照运算符类型,只总结能够自动做类型转换的运算 ...

  2. codevs2019 Uva10029 递变阶梯

    提交地址:[codevs][Uva] 题目描述  递变是指通过增加.减少或改变单词x中的一个字母,使它变成字典中的另一个单词y.比如将dig变成dog,将dog变成do都是递变.递变阶梯是一个按字典序 ...

  3. python str.format()

    python中的字符串格式函数str.format(): #使用str.format()函数 #使用'{}'占位符 print('I\'m {},{}'.format('Hongten','Welco ...

  4. 程序员带你一步步分析AI如何玩Flappy Bird

    以下内容来源于一次部门内部的分享,主要针对AI初学者,介绍包括CNN.Deep Q Network以及TensorFlow平台等内容.由于笔者并非深度学习算法研究者,因此以下更多从应用的角度对整个系统 ...

  5. 自动生成数学题型一 (框架Struts2) 题型如（a+b=c）

    1. 加减乘除 1.1 随机生成制定范围的整数 /** * 随机产生一个被限定范围的整数 * * @param num1 * 定义起始范围 num1 * @param num2 * 定义终止范围 nu ...

  6. 监听器的小示例：利用HttpSessionListener和HttpServletContextListener实现定时销毁HttpSession

    1.创建MyServletContextListener实现HttpServletContextListener接口 @Override public void contextDestroyed(Se ...

  7. sql中常见日期获取

    获取当前年月日 --获取当前月份 ,GETDATE())) --获取当前月份的下个月 ,GETDATE())) --获取当前月份的上个月 year()获取年 select year(GETDATE() ...

  8. BeautifulSoup库children(),descendants()方法的使用

    BeautifulSoup库children(),descendants()方法的使用 示例网站:http://www.pythonscraping.com/pages/page3.html 网站内容 ...

  9. node express安装

    我们现在全局安装只需要安装这个命令行工具就可以,指令如下: npm install -g express-generator 这时我们就着手安装express框架,指令如下: express blog ...

  10. Java 别名(Aliasing)

    别名 (Aliasing) 别名,顾名思义,是有别于现在名字的另一个名字,但指的是不是同一个人或事物呢?比如,你上学的时候同学有没有给你起什么外号?如果有的话,你的名字和同学给你起的外号是不是都指的是 ...