使用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. 一个web应用的诞生(9)--回到用户

    在开始之前,我们首先根据之前的内容想象一个场景,用户张三在网上浏览,看到了这个轻博客,发现了感兴趣的内容,于是想要为大家分享一下心情,恩?发现需要注册,好,输入用户名,密码,邮箱,并上传头像后,就可以 ...

  2. Nginx + ngx_lua安装测试【CentOs下】

          最近打算搞搞nginx,扒着各位先驱的文章自己进行测试下,中间过程也是错误不断,记录一下,以备使用.       nginx的安装挺简单的,主要还是研究下一些第三方的模块,首先想试下初始化 ...

  3. 老李分享：jvm结构简介 2

    2.2.4 Program counter regsiters:程序计数器 类似于PC寄存器,是一块较小的内存区域,通过程序计数器中的值寻找要执行的指令的字节码,由于多线程间切换时要恢复每一个线程的当 ...

  4. MongoDB基础教程系列--第五篇 MongoDB 映射与限制记录

    上一篇提到的 find() 的方法,细心的伙伴会发现查询的结果都是显示了集合中全部的字段,实际应用中,显然是不够用的.那么有没有办法指定特定的字段显示出文档呢?答案是肯定的,MongoDB 中用映射实 ...

  5. 【微信开发】PHP中奖概率经典算法实例

    $arr=array("50","30","20"); //这里简单列出三个数 $pro = array_sum($arr); // 概率数 ...

  6. Mybatis基础学习(五)—缓存

    一.概述      mybatis提供查询缓存,如果缓存中有数据就不用从数据库中获取,用于减轻数据压力,提高系统性能.           一级缓存是SqlSession级别的缓存.在操作数据库时需要 ...

  7. Redis数据类型之字符串String

    String类型是Redis中最基本也最简单的一种数据类型 首先演示一些常用的命令 一.SET key value 和GET key SET key value 和 GET key  设置键值和获取值 ...

  8. 用MPLAB IDE编程时，软件总是弹出一个窗口提示： “the extended cpu mode configuration bit is enabled,but the program that was loaded was not built using extended cpu instructions. therefore,your code may not work properly

    用MPLAB IDE编程时,软件总是弹出一个窗口提示:"the extended cpu mode configuration bit is enabled,but the program ...

  9. 关于Git增、删、改源地址问题

    在上篇博客中我们了解了Git的基本使用,如果你已经建立了一个远程代码库,并且遇到了远程代码库源地址修改的问题,那么这篇博客可能会帮到你. 1.如何查看当前远程Git库源地址呢? $git remote ...

  10. Hadoop之HDFS原理及文件上传下载源码分析（上）

    HDFS原理 首先说明下,hadoop的各种搭建方式不再介绍,相信各位玩hadoop的同学随便都能搭出来. 楼主的环境: 操作系统:Ubuntu 15.10 hadoop版本:2.7.3 HA:否(随 ...