CSS3实现立体菜单

原创 2016年05月31日 19:55:15

html结构:

<div class="nav">
        <a href="#" class="highlight">Home</a>
        <a href="#">About</a>
        <a href="#">Servics</a>
        <a href="#">Portfolio</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
    </div>

CSS3:

* {
            margin:0;
            padding: 0;
            font-family: 'Microsoft Yahei'
        }
        a {
            color: #fff;
            text-decoration: none;
        }
        body {
            background-color: #222930;
        }
        .nav {
            margin:10%;
        }
        .nav a {
            padding: 15px 20px;
            margin-left: -4px;
            border: 1px solid #121212;
            border-right: none;
            color: #777;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 3px rgba(255,255,255,0.1) inset,
                        0 1px 0px rgba(255,255,255,0.1) ;
        }
        .nav a:first-child {
            border-radius:6px 0 0 6px;
        }.nav a:last-child {
            border-radius: 0 6px 6px 0;
            border-right: 1px solid #121212;
        }
        .nav a.highlight {
            color: #fff;
        }

截图:

CSS3实现3D立体效果

CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及...
  • wonderful_life_mrchi
  • wonderful_life_mrchi
  • 2016年09月02日 17:04
  • 69810

如何创建纯CSS3下拉菜单

本节教程中我们将介绍如何只使用css3创建一个漂亮的导航下拉菜单,兼容所有主流浏览器,包括ie7,ie8当然在ie7/8浏览器中一些css3特性就不支持了,比如圆角,但是整个菜单还是可以很好地显示滴。...
  • dyllove98
  • dyllove98
  • 2013年05月25日 15:00
  • 5119

CSS3立体文字最佳实践

昨天的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,立体字的纵深感、方向感、错落感如何...
  • whqet
  • whqet
  • 2014年05月06日 13:40
  • 11526

CSS3实现无图立体按钮

  • 2011年05月05日 13:47
  • 12KB
  • 下载

CSS3实现网页立体导航

  • 2015年03月17日 23:01
  • 2KB
  • 下载

HTML5+CSS3实现的会翻动的3D立体图书效果源码

  • 2015年08月31日 09:28
  • 101KB
  • 下载

CSS3实现3d效果的立体盒子

学习css3那会写的案例,有一段时间了,那会还没有博客呢,现在有博客了,就把一些自我感觉比较好的案例都放上来了。 当时用DW写的,所以css代码可能看起来会有一点乱,看到的朋友多多包涵哦! ...
  • srj15110129498
  • srj15110129498
  • 2017年08月07日 20:14
  • 224

css3实现立体旋转-------Day65

今天打扫新租下来的房子,哎,实在是没法说,准备把电脑baoguoqu
  • marSmile_tbo
  • marSmile_tbo
  • 2014年07月12日 16:27
  • 1128

CSS3实现图片超立体3D效果

我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错。先来看看效果图。 如何,看上去挺不错吧,倾斜、阴...
  • benyoulai5
  • benyoulai5
  • 2015年09月07日 18:56
  • 802

CSS3属性之text-shadow和box-shadow(立体效果的实现)

语法: text-shadow : none |  none | [, ] *  或none | [, ]* 相关属性 : 无 取值:  :指定颜色。 :由浮点数字和单位标识符组成...
  • u011630575
  • u011630575
  • 2015年10月15日 10:41
  • 820
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3实现立体菜单
举报原因:
原因补充:

(最多只允许输入30个字)