文档章节

使用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>

效果图如下:

© 著作权归作者所有

共有 人打赏支持
上一篇: 制作3D旋转视频
下一篇: css3-border-image
w
粉丝 0
博文 10
码字总数 3165
作品 0
西安
私信 提问
10大经典CSS3菜单应用欣赏

很多时候,我们的网页菜单需要个性化,从而来适应各种行业的用户视觉操作体验。本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用,菜单涉及到动画菜单、Tab菜单、面包屑菜单等。 1、CSS...

boy22funny
2015/03/12
11
0
css3实现3D立体翻转导航特效

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

wybo521
2016/01/18
43
0
2015年15个最新的CSS3效果演示及教程

CSS 3D云 这是一个demo应用程序,你可以生成一个与现实生活一模一样的云,并可以对其进行调整。这个demo的代码比较复杂,它运用了CSS3 3D变换和部分JavaScript技术。效果演示>> 查看教程>> ...

薛定谔的悖论
2015/07/23
1
0
7 款非常有创意的 CSS3/jQuery 按钮导航

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

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

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

切切歆语
2017/10/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[开源系统] springboot快速开发框架推荐

本期为大家精选了 码云 上优秀的 Spring Boot 语言开源项目,涵盖了企业级系统框架、文件文档系统、秒杀系统、微服务化系统、后台管理系统等,希望能够给大家带来一点帮助:) 1、项目名称:...

MoksMo
16分钟前
1
0
深入解析Vue里函数的调用顺序介绍

今天为大家分享一篇对vue里函数的调用顺序介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 method用来定义方法的,比如你@cl...

前端攻城老湿
22分钟前
6
0
深入总结Javascript原型及原型链

本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 我们创建的每个函数都有一...

前端攻城小牛
25分钟前
2
0
千万级规模【高性能、高并发】互联网架构经验分享~

作者:Java关博 链接:http://blog.51cto.com/14049376/2329037?utm_source=tuicool&utm_medium=referral 架构以及我理解中架构的本质 在开始谈我对架构本质的理解之前,先谈谈对今天技术沙龙...

Java干货分享
26分钟前
1
0
缓存

并发情况下发生的缓存问题: 缓存一致性: 缓存穿透:是指在高并发场景下,如果某一个key被高并发的访问,缓存没有命中,出于容错性的考虑,会去数据库获取数据,从而导致大量请求访问数据库...

wuyiyi
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部