使用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. （转）Uploadify 3.2 参数属性、事件、方法函数详解

    转自http://blog.sina.com.cn/s/blog_5079086b0101fkmh.html Hallelujah博客 一.属性 属性名称 默认值 说明 auto true 设置为tr ...

  2. salesforce 零基础学习（六十七）SingleEmailMessage 那点事

    在salesforce开发中,发送邮件是一个很常见的功能.比如在进入审批流以后的通过和拒绝的操作需要发送邮件给记录的owner,和其他系统交互以后更改了某些状态通知相关的User或者Contact等等 ...

  3. java学习笔记 --- StringBuffer类

    1.定义:字符串缓冲区,即它是一个容器,容器中可以装很多字符.并且能够对其中的字符进行各种操作. StringBuffer的特点: 1.是一个字符串缓冲区,其实就是一个容器. 2.长度是可变,任意类型 ...

  4. openfire当中的Custom Database Integration Guide的配置

    openfire官网配置的链接为:Custom Database Integration Guide 按照上面的步骤一步步配置在xml当中,发现始终不起作用,最后在stackoverflow找到的链接 ...

  5. linux 下的 mkfifo、exec 命令使用

    MKFIFOSection: User Commands (1)Updated: 1998年11月Index Return to Main Contents  NAME(名称)mkfifo - 创建F ...

  6. 搭建 redis 3.2.8服务器

    实验环境 redis 3.2.8 + RHEL 7.3 系统 软件下载地址 http://download.redis.io/releases/redis-3.2.8.tar.gz #注意,我的软件包 ...

  7. 树莓派Raspberry实践笔记-简单方法安装minicom

    [原创链接]:http://www.cnblogs.com/atsats/p/6665566.html 本文结合最新的Raspbain jessie,使用图形化的方式安装一款软件:串口调试工具mini ...

  8. 在centOS7.2安装配置zabbix监控

    zabbix由两部分组成,zabbix-server与可选的zabbix-agent.zabbix-server可以通过SNMP,ZABBIX-AGENT,PING,端口监视等方法提供对远程服务器/网 ...

  9. 创建你的第一个webdriver python代码

    前言 今天我们开始我们的第一个python webdriver自动化测试脚本.并就测试脚本进行一一解释说明. webdriver python代码 本示例代码演示了使用Ie浏览器访问百度进行搜索测试. ...

  10. Java集合的区别和选择

              Collection |--List       有序,可重复 |--ArrayList 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高 |--Vector 底层数据结构 ...