CSS3实现酷炫导航

上面是一个效果图，代码在下面：

html

<html>
<head>
    <meta charset="utf-8"/>
    <title>CSS3 实现的导航</title>
    <link type="text/css" rel="stylesheet" href="nav.css" />
    <base target="_blank" href="http://www.ido321.com"></base>
</head>
<body>
    <nav>
        <ul class="nav-ul">
            <li>
                <a href="/">首页</a>
            </li>
            <li>
                <a href="/category/frontend">Web前端</a>
                <ul>
                    <li  class="nav-effect-1">
                        <a href="/category/frontend/javascript">JavaScript</a>
                    </li>
                    <li  class="nav-effect-2">
                        <a href="/category/frontend/jq">JQuery</a>
                    </li>
                    <li  class="nav-effect-3">
                        <a href="/category/frontend/style">CSS</a>
                    </li>
                    <li  class="nav-effect-4">
                        <a href="/category/frontend/html">HTML</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/category/end">后端</a>
                <ul>
                    <li  class="nav-effect-1">
                        <a href="/category/end/python-end">Python</a>
                    </li>
                    <li  class="nav-effect-2">
                        <a href="category/end/php">PHP</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/category/trivial">琐碎杂类</a>
                <ul>
                    <li  class="nav-effect-1">
                        <a href="/category/trivial/linux">Linux</a>
                    </li>
                    <li  class="nav-effect-2">
                        <a href="/category/trivial/ajax">Ajax</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/category/life">我的生活</a>
                <ul>
                    <li  class="nav-effect-1">
                        <a href="/category/life/college">College</a>
                    </li>
                    <li  class="nav-effect-2">
                        <a href="/category/life/review">Review</a>
                    </li>
                    <li  class="nav-effect-3">
                        <a href="/category/life/sentiment">Sentiment</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">关于我</a>
                <ul>
                    <li  class="nav-effect-1">
                        <a href="/contribute">友情链接</a>
                    </li>
                    <li  class="nav-effect-2">
                        <a href="/message">留言板</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

css

*{
    margin:0 auto;
}
body{
    background-color: #EEEEEE;
    font-family: Microsoft Yahei,Arial,sans-serif;
}
nav{
    width: 100%;
    background-color: #455552;
    position: relative;
    width: 650px;
    margin-top: 100px;
}
.nav-ul{
    list-style: none;
}
.nav-ul>li{
    display: inline-block;
    position: relative;
}
.nav-ul a{
    text-decoration: none;
    color: #FFF;
    display: inline-block;
    padding: 10px 20px;
}
.nav-ul a:hover{
    background-color: #1ABC9C;
}
.nav-ul a:hover+ul li{
    opacity:1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.nav-ul a+ul{
    list-style: none;
    position: absolute;
    transition: opacity 0.5s;
     -webkit-perspective: 800;
    -webkit-transform-style: preserve-3d;
}
.nav-ul a+ul:hover li{
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.nav-ul a+ul li{
    position: relative;
    left: -40px;
    opacity: 0;
    width: 150px;
    transition: transform 1.5s,opacity 0.8s;
}
.nav-ul a+ul a{
    display: inline-block;
    width: 75%;
    background-color: rgba(26,188, 156, 0.75);
}
.nav-effect-1{
    transform: rotateY(90deg) translateX(10px);
}
.nav-effect-2{
    transform: rotateY(120deg) translateX(20px);
}
.nav-effect-3{
    transform: rotateY(150deg) translateX(30px);
}
.nav-effect-4{
    transform: rotateY(180deg) translateX(40px);
}
.nav-ul a+ul a:hover{
    background-color: rgba(69,85, 82, 0.75);
}

查看demo：demo

原文出处：http://www.ido321.com/1547.html

时间： 2024-10-04 05:39:02

CSS3实现酷炫导航的相关文章

css3实现酷炫的3D盒子翻转效果

简介运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒子,代码如下: //左面 .pic2{ transform:rotateY(90deg); //沿y轴翻转90度 transform-origin:right; //以右边为轴 } //前面 .pic6{ transform:translateZ(100%); //垂直屏幕向外移动立方体的长度 }

Html + Css3 制作酷炫的导航栏

主要亮点: 1 ul 水平显示 2 li 去掉圆点 3 li中字体水平.竖直居中 4 li控制边框样式 5 使用html + css3 渐变画图制作背景图片 6 更改颜色透明度 7 DIV制作边框阴影先看效果图: 实现代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">  <meta nam

css3开发酷炫滑动导航

使用CSS3制作酷炫仿苹果複選框

1.CSS3 兄弟选择符(E~F) 2.CSS :after 选择器 3.神奇的css属性pointer-events 课程链接: http://www.gbtags.com/gb/gbliblist/136.htm

CSS3 3D酷炫立方体变换动画

我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章微博主要利用了CSS3的一些新特性, 主要用到关键帧来使3D图形运动起来,涉及到了一些抽象的思想,立体的想象. 先给大家看看完成的效果,代码也不是很难,每行代码都给到了详细注释,纯CSS,没有用到JS,CSS3不错. 效果如下: 每一行基本都有注释,就不重复说了,代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&

使用CSS3制作酷炫防苹果复选框自行测试！

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:#eee; } .lbl{ /*复选框背景色*/ height:20px; width:50px; display:block;/*元素将显示为块级元素*/ ba

3D酷炫翻牌效果

使用CSS3实现酷炫的3D翻转效果,上代码: <!doctype html> <html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywo

jQuery和CSS3超酷3D页面切换导航菜单插件

这是一款效果非常酷的jQuery和CSS3 3D页面切换导航菜单特效插件.该导航菜单插件是汉堡包隐藏菜单,每个菜单项的图标使用SVG来制作,鼠标滑过图标时有动画效果,点击某一个菜单项后,页面会在3D空间进行切换,效果非常炫酷. 效果演示:http://www.htmleaf.com/Demo/201504111660.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201504111659.html

纯CSS3实现的一些酷炫效果

纯CSS3实现的一些酷炫效果之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看下页面结构: <body> <div class="container">  <div class="face">  <div cl