css3 实现3D导航栏

来源：互联网发布：软件开发是什么工作编辑：程序博客网时间：2024/05/22 08:18
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>lianxi</title></head><style type="text/css">    body{        background:#ebebeb;    }    *{        margin:0;        padding: 0;    }    .nav{        margin:0 auto;        margin-top: 30px;        width: 560px;        height: 50px;        background-color: #f65f57;        border-radius: 5px;        box-shadow: 2px 4px;        /*font:bold 0/50px Arial;*/    }    .nav li:after{        content: "";        position: absolute;        width: 1px;        height: 18px;        background: linear-gradient(to bottom,#f82f87,#B0363F,#f82f87);        top: 15px;        right: 0px;    }    .nav li:last-child:after{        width: 0px;        height: 0px;    }    .nav li{        position: relative;        list-style: none;        display: inline-block;        padding:0 14px ;    }    .nav li a:hover{        -webkit-transform:rotate(10deg);          -moz-transform:rotate(10deg);          -o-transform:rotate(10deg);          -ms-transform:rotate(10deg);          transform:rotate(10deg);    }    .nav li a{        display: inline-block;        -webkit-transition: all 0.2s ease-in;           -moz-transition: all 0.2s ease-in;             -o-transition: all 0.2s ease-in;            -ms-transition: all 0.2s ease-in;                transition: all 0.2s ease-in;/*transition定义过渡      实现所有动画延迟0.2s*/                /*ease 规定慢速开始，然后变快，然后慢速结束的过渡效果;   ease-in 规定以慢速开始的过渡效果;   ease-out 规定以慢速结束的过渡效果;   ease-in-out 规定以慢速开始和结束的过渡效果*/        text-decoration: none;        line-height: 50px;        color: #FFF;        font:bold;        font-size: ;        font-family: Arial;        text-shadow:1px 2px rgba(0,0,0,.5);    }</style><body>    <ul class="nav">        <li><a href="">Home</a></li>        <li><a href="">About Me</a></li>        <li><a href="">Protfilo</a></li>        <li><a href="">Blog</a></li>        <li><a href="">Resource</a></li>        <li><a href="">Contact Me</a></li>    </ul></body></html>
效果如下：
当鼠标放在a标签时字将会转动10deg
0 0