使用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. iOS开发之Quartz2D

    1.         Quartz2D概述及作用 Quartz2D的API是纯C语言的,Quartz2D的API来自于Core Graphics框架. 数据类型和函数基本都以CG作为前缀,比如: CG ...

  2. HTTP认证

    参考博文:HTTP协议详解 HTTP请求报头: Authorization HTTP响应报头: WWW-Authenticate HTTP认证是基于质询/回应(challenge/response)的 ...

  3. git团队合作开发流程

    关于git的环境配置在以前已说过就不罗索了,这里介绍在公司如何团队一起开发项目 首先你需要把你的秘钥给管理员,如何配置以前介绍过了就不说了 进入正题:git ls-files查看当前厂库被add得所有 ...

  4. iOS应用的几个阶段

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  5. 老李推荐：第14章4节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-装备ViewServer-端口转发 3

    formAdbRequest我们在之前已经分析过,做的事情就是组建好ADB协议的命令以待发送给ADB服务器,在我们558行中最终组建好的ADB协议命令将会如下: “host-serial:xxx:fo ...

  6. 神奇的marquee--滚动的文字

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. LwIP之socket应用--WebServer和Modbus TCP

    1. 引言 LwIP是嵌入式领域一个流行的以太网协议栈, LwIP开放源码,用C写成非常方便移植,并且支持socket接口,使用者可以集中精力处理应用功能. 本文就是LwIP socket使用的一个小 ...

  8. 2 Java对象的创建过程

    JAVA中创建对象直接new创建一个对象,对么对象的创建过程是怎样的呢? 程序运行过程中有许多的对象被创建出来.那么对象是如何创建的呢? 一 对象创建的步骤 1 遇到new指令时,检查这个指令的参数是 ...

  9. .NetCore上传多文件的几种示例

    本章和大家分享的是.NetCore的MVC框架上传文件的示例,主要讲的内容有:form方式提交上传,ajax上传,ajax提交+上传进度效果,Task并行处理+ajax提交+上传进度,相信当你读完文章 ...

  10. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...