文档章节

使用css3制作立体导航栏

w
 wyn5111
发布于 2016/06/27 21:25
字数 262
阅读 12
收藏 0

<!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:10px;
          /*制作导航立体风格*/
          box-shadow:8px 8px 5px #f00;
        }
        .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{
            content:"";
            color:#666;
            position:absolute;
            top:18px;
            height:20px;
            left:-1px;
            width:1px;
            background-image:linear-gradient(to bottom,#f65f57,#993333,#f65f57);
         
        }
           /*删除第一项和最后一项导航分隔线*/
         .nav li:first-child:before{
           background-image: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>

效果图如下:

© 著作权归作者所有

共有 人打赏支持
w
粉丝 0
博文 10
码字总数 3165
作品 0
西安
css3实现3D立体翻转导航特效

css3实现3D立体翻转导航特效 效果描述: 当鼠标悬停在导航上,会有一个立体式翻转效果,效果很逼真 css3特效,不支持低版本浏览器 附件中的案例没有实用任何图片,所以对于大家来说,省去了路...

wybo521
2016/01/18
43
0
7 款非常有创意的 CSS3/jQuery 按钮导航

按钮是网页表单交互的灵魂,一套优秀的按钮设计能不仅提升网站整体的用户体验,更重要的是可以在网站互动方面做出非常重要的贡献。那么我们该如何来设计按钮,什么样的按钮才能让用户有交互的...

yykj
2012/11/16
5.9K
12
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
0
0
16 个新鲜的 CSS3 在线教程

用CSS3制作令人印象深刻的产品展示 使用jQuery和CSS3制作闪亮的旋钮控制 使用 CoffeeScript 创建一个类 iOS 的界面 使用 CSS3 制作报纸阅读 制作一个 CSS3 动画菜单 使用 jQuery 和 CSS3 制作...

红薯
2012/04/29
6K
4
推荐7个 CSS3 制作的创意下拉菜单效果

使用 jQuery 和 CSS3 制作向下滑动的导航菜单 在线演示 源码下载 2. CSS3 简约风格导航菜单 在线演示 源码下载 3. CSS3 动画下拉菜单 在线演示 源码下载 4. 纯 CSS3 制作的两级菜单 在线演示...

rin9958
2016/06/30
27
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

设计模式:简单工厂模式(静态共产方法模式)

简单工厂的构成包括三个角色: 1)抽象产品类 2)具体产品类(继承抽闲产品类) 3)工厂类(生产具体产品) 具体代码实现 1、抽象产品类 /** * 抽象类 */public abstract class Car ...

京一
8分钟前
0
0
Lombok使用

1 介绍 Lombok是一个简单的Java库,改工具可以通过注解自动地提供一些方法,简化开发。比如编写POJO时需要为每个属性提供getter()方法和setter()方法,这就可以使用Lombok实现。 2 配置 Lomb...

SuperHeroes
16分钟前
0
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
18分钟前
0
0
java虚拟机之内存模型

1. 概述 对于从事 C、C++ 程序开发的人员来说,在内存管理领域,他们既是拥有最高权力的「皇帝」又是从事基础工作的「劳动人民」 --- 既拥有每个对象的「所有权」,又担负着每一个对象生命开...

firepation
20分钟前
0
0
解决linux的-bash: ./xx: Permission denied

解决linux的-bash: ./xx: Permission denied 在linux下执行sh文件时提示下面信息: -bash: ./xx.sh: Permission denied解决:chmod 777 xx.sh 1 2 3 4 Linux chmod +755和chmod +777 ......

DemonsI
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部