zoukankan      html  css  js  c++  java
  • css3制作炫酷导航栏效果

    今天主要利用hover选择器。鼠标滑过查看效果。

    一。普通导航栏

    • Home
    • Content
    • Service
    • Team
    • Contact

    对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单。

    (1)使用ul标签布局

    (2)鼠标经过事件

    <div id="demo1">
            <ul>
                <li>Home</li>
                <li>Content</li>
                <li>Service</li>
                <li>Team</li>
                <li>Contact</li>
            </ul>
        </div>
    *{
        padding:0;
        margin:0;
        list-style:none;
        text-decoration:none;
    }
    a{
        color:#fff;
    }
    #demo1{
        width:600px;
    }
    #demo1 ul li{
        float:left;
        width:100px;
        height:50px;
        text-align:center;
        background:#ccc;
        line-height:50px;
        color:#FFF;
    }
    #demo1 ul li:hover{
        background:#999;
    }

    (二)括号类导航栏

    对于导航栏的排版这里就不多说了,可以看到当鼠标经过的时候会从文字中出现括号,思路:

    (1)当无鼠标经过事件时,括号其实是有的,只不多它处于隐形状态在文字中间

    (2)当鼠标经过时,括号从中间移动到两边,并且从隐形变为显示。

     <div id="demo2">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Content</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    #demo2{
        width:600px;
        height:50px;
        margin:20px auto;
    }
    #demo2 ul li{
        position:relative;
        float:left;
        width:100px;
        height:50px;
        text-align:center;
        line-height:50px;
        background:#000;
    }
    #demo2 ul li a:before{
        content:"[";
        margin-right:10px;
        transform:translateX(20px);
        -webkit-transform:translateX(20px);
        -moz-transform:translateX(20px);
        -ms-transform:translateX(20px);
        
    }
    #demo2 ul li a:after{
        content:"]";
        margin-left:10px;
        transform:translateX(-20px);
        -webkit-transform:translateX(-20px);
        -moz-transform:translateX(-20px);
        -ms-transform:translateX(-20px);
    }
    #demo2 ul li a:before,#demo2 ul li a:after{
        display:inline-block;
        opacity:0;
        transition:transform 0.3s, opacity 0.2s;
        -moz-transition:transform 0.3s, opacity 0.2s;
        -webkit-transition:transform 0.3s, opacity 0.2s;
        -ms-transition:transform 0.3s, opacity 0.2s;
    }
    #demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after {
        opacity: 1;
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transform: translateX(0px);
    }

    三。滑动导航栏

    从演示效果来看要注意两点

    (1)鼠标经过时有横向从上到下

    (2)鼠标经过时文字从上到下并且变换颜色

    这就和上一个例子很像了

    (1)横线其实是存在的,只不过鼠标没有经过时是在文字上方且透明的,鼠标经过时横线由上到下。

    (2)文字这里就要定义一个动画了,因为在鼠标经过时它体现了三种状态:

      ①文字从现位置划下

      ②文字从出现在上方

      ③文字从上方滑到现位置

     <div id="demo3">
            <ul>
                <li><a href="#"><span>Home</span></a></li>
                <li><a href="#"><span>Content</span></a></li>
                <li><a href="#"><span>Service</span></a></li>
                <li><a href="#"><span>Team</span></a></li>
                <li><a href="#"><span>Contact</span></a></li>
            </ul>
        </div>
    #demo3 ul li{
        float:left;
        margin:0 25px;
        position:relative;
    }
    #demo3 ul li a{
        color:#D8761E;
        font-family:'Righteous', cursive;
        display:block;
        padding:10px 0;
    }
    #demo3 ul li span{
        display:block;
    }
    #demo3 ul li a:before{
        content:"";
        position:absolute;
        width:100%;
        height:3px;
        background:#D8761E;
        bottom:0;
        opacity:0;
        -webkit-transform: translate3d(0, -40px, 0);
        transform: translate3d(0, -40px, 0);
        -webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;
        transition: transform 0s 0.3s, opacity 0.2s;
    }
    #demo3 ul li a:hover::before{
        opacity:1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
        transition: transform 0.5s, opacity 0.1s;
        -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    }
    #demo3 ul li a:hover span{
        color:#510301;
        -webkit-animation: anim-francisco 0.3s forwards;
        animation: anim-francisco 0.3s forwards;
    }
    @-webkit-keyframes anim-francisco {
        50% {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
    
        51% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
    
        100% {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }
    
    @keyframes anim-francisco {
        50% {
            opacity: 0;
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
    
        51% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
    
        100% {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    这里注意的是不能给标签设置宽高,因为一旦设置宽高会影响文字滑动路线,变得很夸张。这里加span也是这个原因,鼠标经过a时让span以a为参照进行滑动。

    里面的标签就不解释了,自己查效果会更好哦。

    我好无奈呀,用这个显示效果a标签和li的默认样式竟然不能取消,谁能告诉我为什么/(ㄒoㄒ)/~~  不过自己编译的话在浏览器里是正常的

  • 相关阅读:
    linux中WDCP的日志彻底删除技巧
    jquery中页面Ajax方法$.load的功能
    PHP与MYSQL中UTF8 中文排序例子
    mysql获取group by的总记录行数方法
    jquery获取radio值
    python中数组与多维数组用法介绍
    php开启与关闭错误提示
    asp.net url址址中中文汉字参数传递乱码解决方法
    js事件之event.preventDefault()与(www.111cn.net)event.stopPropagation()用法区别
    css中position:fixed实现div居中
  • 原文地址:https://www.cnblogs.com/xmoomoo/p/5807260.html
Copyright © 2011-2022 走看看