使用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. SocketServer模块

    在利用select实现伪并发的socket博文中我们说了: 如果要实现一个server端可以和多个客户端进行通信可以使用 1.多线程 2.多进程 3.select I/O多路复用 在那篇博文中我们介绍 ...

  2. MySQL中的一些内置函数

    mysql> select now(); #获取当前的日期和时间 +---------------------+ | now() | +---------------------+ | -- : ...

  3. 如何在Ubuntu_16_04下使用MySql的GR

    一.前言 该文章主要是记录下从一个纯净的系统开始如何安装MySql 5.7.17 并且使用GR,以便于自己后期查看以及分享给他人. 二.安装mysql 因为默认ubuntu的源并不是最新的mysql所 ...

  4. Unity - 通过降低精度减少动画文件的大小

    Animation是Unity中的动画文件,主要内容由一个个关键帧数据构成.通过将Unity的资源序列化方式调整为Text,就可以以文本方式查看动画文件.通过菜单项Edit -> Project ...

  5. 基于CDIF实现的——API在线自动化测试

    传统的测试工具在测试一个API的时候,必须手动填写这个API所需要接收的所有信息,比如一个查询航班动态的API,他接收两个输入字段,一个叫flight, 一个叫date,那么测试这个API的用户,需要 ...

  6. angular替代Jquery，常用方法支持

    1.angular.bind(self,fn.args);   切换作用域执行 2.angular.copy(source,[destination]);   拷贝和深度拷贝 3.angular.eq ...

  7. XJOI1595空中楼阁【最短路】

    空中楼阁 ( House ) 话说Z4阴差阳错地来到了神秘岛.不久,他们发现,这是一个由n个小岛和一个中心岛组成的群岛,群岛之间有m座桥.令他们感到惊讶的是,这些桥并不是固定不变的,经较长时间的观察, ...

  8. Laravel查询构造器的使用方法整理

    1.结果集 1.1从一张表获取所有行,get方法获取所有行 $users = DB::table('users')->get(); 获取列的值 foreach ($users as $user) ...

  9. 原生tab切换

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  10. 机器学习-scikit learn学习笔记

    scikit-learn官网:http://scikit-learn.org/stable/ 通常情况下,一个学习问题会包含一组学习样本数据,计算机通过对样本数据的学习,尝试对未知数据进行预测. 学习 ...