一个导航栏带简单动画效果

前端学习中+_+

一个导航栏带简单动画效果_第1张图片


<html>
<head>
    <title>二级页面title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            font-size:12px;
        }
        .nav{
            margin:10px auto;
            width:486px;
            background-color: #d3d3d3;
            border-radius: 5px;
        }
        .nav>ul>li{
            float:left;
            position:relative;
        }
        .nav>ul{
            list-style-type: none;
            border-radius: 5px;
        }
        a{
            text-decoration: none;
            color:#86777d;
            font-family:"Microsoft YaHei";
        }
        .nav>ul>li>a{
            display:inline-block;
            height:38px;
            line-height: 38px;
            background-color: #d3d3d3;
            padding-right:16px;
            padding-left:16px;
            border-left:1px solid #eeeeee;
        }
        .nav ul li ul li a{
            display:inline-block;
            width:233px;
            height:40px;
            line-height:40px;
            padding-left:16px;
            border-top:1px solid #eeeeee;
            -webkit-transition: all 0.4s linear;
        }
        .nav ul li ul{
            display:none;
            background-color: #d3d3d3;
            border-radius: 5px;
            list-style-type: none;
            position:absolute;
            top:38px;
            left:0;
        }
        .nav>ul>li:hover ul{
            display:block;
            position:absolute;
            -webkit-animation: mymove 0.3s linear forwards;
        }
        @-webkit-keyframes mymove {
            from{
                left:0;
                top:43px;
            }
            to{
                left:0;
                top:38px;
            }
         }
    style>
head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">Homea>
                <ul>
                    <li><a href="#">Web Designinga>li>
                    <li><a href="#">Motion Graphicsa>li>
                    <li><a href="#">Web Development(PHP,Python)a>li>
                    <li><a href="#">Photographya>li>
                    ul>
            li>
            <li><a href="#">About Usa>
                <ul>
                    <li><a href="#">Web Designinga>li>
                    <li><a href="#">Motion Graphicsa>li>
                    <li><a href="#">Web Development(PHP,Python)a>li>
                    <li><a href="#">Photographya>li>
                ul>
            li>
            <li><a href="#">Servicesa>
                <ul>
                    <li><a href="#">Web Designinga>li>
                    <li><a href="#">Motion Graphicsa>li>
                    <li><a href="#">Web Development(PHP,Python)a>li>
                    <li><a href="#">Photographya>li>
                ul>
            li>
            <li><a href="#">Portfolioa>
                <ul>
                    <li><a href="#">Web Designinga>li>
                    <li><a href="#">Motion Graphicsa>li>
                    <li><a href="#">Web Development(PHP,Python)a>li>
                    <li><a href="#">Photographya>li>
                ul>
            li>
            <li><a href="#">Talk to usa>
                <ul>
                    <li><a href="#">Web Designinga>li>
                    <li><a href="#">Motion Graphicsa>li>
                    <li><a href="#">Web Development(PHP,Python)a>li>
                    <li><a href="#">Photographya>li>
                ul>
            li>
            ul>
    div>
body>
html>

你可能感兴趣的:(一个导航栏带简单动画效果)