文档章节

使用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
16 个新鲜的 CSS3 在线教程

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

红薯
2012/04/29
6K
4
7 款非常有创意的 CSS3/jQuery 按钮导航

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

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

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

切切歆语
2017/10/23
0
0
推荐7个 CSS3 制作的创意下拉菜单效果

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

rin9958
2016/06/30
27
0

没有更多内容

加载失败,请刷新页面

加载更多

java序列化(四) - 实现Externalnalizable接口

实现Externalnalizable接口 实现Externalnalizable接口 package meng.springboot.demo.obj;import java.io.Externalizable;import java.io.IOException;import java.io.ObjectInput......

晨猫
7分钟前
0
0
php 日志库获取调用方的代码文件地址和代码行数

在使用其他语言的打印日志的时候,经常能看到打印日志时带上文件地址和代码行数,对于调试和查找问题非常方便,但是 php 日志库里则很少见到这个功能,但这个功能还是可以实现的。 关键点就是...

anoty
13分钟前
3
0
Android Studio如何批量导入全部包import

当需要导包时,Android Studio有单个导包快捷键 Alt+Enter 但是没有全部的包 但是可以在设置里设置Auto Import自动导入功能

lanyu96
14分钟前
0
0
六款优秀的 Linux 基准测试工具

基准测试是指运行计算机程序去评估硬件和软件性能的行为。硬件基本测试包括评估处理器,内存,显卡,硬盘,网络等不同组件的性能。基准测试有两类: 复合和应用。复合基准对一个硬件执行压力...

openthings
16分钟前
0
0
什么是阿里云容器服务?

关于阿里云容器服务的详细内容:阿里云容器服务使用教程 容器服务(Container Service)提供高性能可伸缩的容器应用管理服务,支持用 Docker 容器进行应用生命周期管理,提供多种应用发布方式...

mcy0425
17分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部