CSS3的一个简单导航栏实现

时间：2021-05-08

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

html

XML/HTML Code复制内容到剪贴板
  • <nav>
  • <ulclass="nav-ul">
  • <li>
  • <ahref="/">首页</a>
  • </li>
  • <li>
  • <ahref="/category/frontend">Web前端</a>
  • <ul>
  • <liclass="nav-effect-1">
  • <ahref="/category/frontend/javascript">JavaScript</a>
  • </li>
  • <liclass="nav-effect-2">
  • <ahref="/category/frontend/jq">JQuery</a>
  • </li>
  • <liclass="nav-effect-3">
  • <ahref="/category/frontend/style">CSS</a>
  • </li>
  • <liclass="nav-effect-4">
  • <ahref="/category/frontend/html">HTML</a>
  • </li>
  • </ul>
  • </li>
  • <li>
  • <ahref="/category/end">后端</a>
  • <ul>
  • <liclass="nav-effect-1">
  • <ahref="/category/end/python-end">Python</a>
  • </li>
  • <liclass="nav-effect-2">
  • <ahref="category/end/php">PHP</a>
  • </li>
  • </ul>
  • </li>
  • <li>
  • <ahref="/category/trivial">琐碎杂类</a>
  • <ul>
  • <liclass="nav-effect-1">
  • <ahref="/category/trivial/linux">Linux</a>
  • </li>
  • <liclass="nav-effect-2">
  • <ahref="/category/trivial/ajax">Ajax</a>
  • </li>
  • </ul>
  • </li>
  • <li>
  • <ahref="/category/life">我的生活</a>
  • <ul>
  • <liclass="nav-effect-1">
  • <ahref="/category/life/college">College</a>
  • </li>
  • <liclass="nav-effect-2">
  • <ahref="/category/life/review">Review</a>
  • </li>
  • <liclass="nav-effect-3">
  • <ahref="/category/life/sentiment">Sentiment</a>
  • </li>
  • </ul>
  • </li>
  • <li>
  • <ahref="#">关于我</a>
  • <ul>
  • <liclass="nav-effect-1">
  • <ahref="/contribute">友情链接</a>
  • </li>
  • <liclass="nav-effect-2">
  • <ahref="/message">留言板</a>
  • </li>
  • </ul>
  • </li>
  • </ul>
  • </nav>

    • css:

    CSS Code复制内容到剪贴板
  • *{
  • margin:0auto;
  • }
  • body{
  • background-color:#EEEEEE;
  • font-family:MicrosoftYahei,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-ula{
  • text-decoration:none;
  • color:#FFF;
  • display:inline-block;
  • padding:10px20px;
  • }
  • .nav-ula:hover{
  • background-color:#1ABC9C;
  • }
  • .nav-ula:hover+ulli{
  • opacity:1;
  • -webkit-transform:rotateY(0deg);
  • transform:rotateY(0deg);
  • }
  • .nav-ula+ul{
  • list-style:none;
  • position:absolute;
  • transition:opacity0.5s;
  • -webkit-perspective:800;
  • -webkit-transform-style:preserve-3d;
  • }
  • .nav-ula+ul:hoverli{
  • opacity:1;
  • -webkit-transform:rotateY(0deg);
  • transform:rotateY(0deg);
  • }
  • .nav-ula+ulli{
  • position:relative;
  • left:-40px;
  • opacity:0;
  • width:150px;
  • transition:transform1.5s,opacity0.8s;
  • }
  • .nav-ula+ula{
  • 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-ula+ula:hover{
  • background-color:rgba(69,85,82,0.75);
  • }

    • 查看demo：demo

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章