一、导航底部边框滑动效果


<html>
<head>
    <meta charset="utf-8">meta>
    <title>滑动导航栏title>
    <script scr="">script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style type="text/css">
        body,div,p{
            margin:0;
            padding:0;
        }
        .nav{
            background-color:black;
            position:fixed;
            left:0px;
            right:0px;
            width:80%;
            margin:10px auto;
            text-align:center;
            height:37px;
        }
        .nav a{
            padding:10px;
            color:white;
            line-height:30px;
            text-decoration:none;
            height:37px;
        }
        #navslip{
            height:2px;
            background-color:#8f919e;
            position:absolute;
            bottom:7px;
            width:0px;
            left:0px;
            display:none;
            overflow:hidden;
        }
    style>
head>
<body>
    <div class="nav">
        <a href="http://baidu.com" target="_black" >百度a>
        <a href="http://sina.com" target="_black" >新浪a>
        <a href="http://58.com" target="_black" >58同城a>
        <a href="http://sentsin.com/message/" target="_black" title="留言">致时光a>
        <a href="http://sentsin.com/daohang/" target="_black">前端圈a>
        <i id="navslip">i>
    div>
    <script>
        $(function (){
            setSlip();
        });
        var setSlip = function(){
            var slip = $('#navslip');
            var a = $('.nav a:first');
            //初始化滑块
            slip.css({
                'width':a.width()+10,
                'left' :parseInt(a.position().left) + 5 +'px'
            });
            $('.nav a').mouseenter(function(){
                //显示滑块
                if(slip.css('display') == 'none'){
                    slip.show();
                };
                //移动滑块
                slip.stop().animate({
                    width: $(this).width()+10,
                    left:  parseInt($(this).position().left) + 5 +'px'
                },300);
            });
        };
    script>
body>
html>


<html>
    <head>
        <meta charset="utf-8">
        <title>Time of new lifetitle>
        <link rel="stylesheet" type="text/css" href="css.css">
    head>
    <style>

    * {
    padding: 0px;
    margin: 0px;
}
body{
    min-width: 1280px;
}
.header {
    height: 56px;
    width: 100%;
    border: 1px solid gray;
}
div.logo {
    float: left;
    margin: 10px 50px;
}

div.logo span {
    font-size: 23px;
    display: block;
    float: right;
}
ul {
    list-style-type: none;
    padding: 0px;
    float: right;
    position: relative;/*子元素absol*/
}
ul img{
    position: relative;
    top: 3px;
}
ul li {
    width: 110px;
    height: 56px;
    text-align: center;
    float: left;
}
ul li a {
    color: #848789;
    text-decoration: none;
    line-height: 56px;
}
ul a:hover{
    color: red;
}
.move{
    height: 4px;
    width: 110px;
    border-top: 4px solid red;/*只需要将上边显示出来*/
    position: absolute;
    left: 0;
    top: 52px;
    transition: left .2s ease-in-out 0s;/*包含四个过度属性:执行变换属性、执行时间、速率、延迟*/
    -webkit-transition: left .2s ease-in-out 0s;/*chrome和safari*/
    -moz-transition: left .2s ease-in-out 0s;/*firefox*/
    -o-transition: left .2s ease-in-out 0s;/*opera*/
}
li:nth-child(1):hover~ .move{    /*li元素的父元素的第一个子元素,当鼠标停留其上时,move元素的left属性改变*/
    left: 0px;
}
li:nth-child(2):hover~ .move{
    left: 110px;
}
li:nth-child(3):hover~ .move{
    left: 220px;
}
li:nth-child(4):hover~ .move{
    left: 330px;
}
li:nth-child(5):hover~ .move{
    left: 440px;
}
li:nth-child(6):hover~ .move{
    left: 550px;
}


    style>
    <body>
        <div class="header">
            <div class="logo">
                <img src="(编组)3.png" alt="ico">
                <span> 新世界span>
            div>
                <ul>
                    <li><a href="#">首页a>li>
                    <li><a href="#">最新活动a>li>
                    <li><a href="#">项目介绍a>li>
                    <li><a href="#">爱心社区a>li>
                    <li><a href="#">关于我们a>li>
                    <li><a href="#" style="color:red;"><img src="2.png" alt="set in"> 登录a>li>
                    <li class="move"> li>
                ul>
        div>
    body>
html>

你可能感兴趣的:(css)