Home > Article > Web Front-end > CSS 3实现酷炫导航_html/css_WEB-ITnose
CSS 3实现酷炫导航_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:13:37898browse
上面是一个效果图，代码在下面：
html
<html><head> <meta charset="utf-8"/> <title>CSS3 实现的导航</title> <link type="text/css" rel="stylesheet" href="nav.css" /> <base target="_blank" href="http://www.ido321.com"></base></head><body> <nav> <ul class="nav-ul"> <li> <a href="/">首页</a> </li> <li> <a href="/category/frontend">Web前端</a> <ul> <li class="nav-effect-1"> <a href="/category/frontend/javascript">JavaScript</a> </li> <li class="nav-effect-2"> <a href="/category/frontend/jq">JQuery</a> </li> <li class="nav-effect-3"> <a href="/category/frontend/style">CSS</a> </li> <li class="nav-effect-4"> <a href="/category/frontend/html">HTML</a> </li> </ul> </li> <li> <a href="/category/end">后端</a> <ul> <li class="nav-effect-1"> <a href="/category/end/python-end">Python</a> </li> <li class="nav-effect-2"> <a href="category/end/php">PHP</a> </li> </ul> </li> <li> <a href="/category/trivial">琐碎杂类</a> <ul> <li class="nav-effect-1"> <a href="/category/trivial/linux">Linux</a> </li> <li class="nav-effect-2"> <a href="/category/trivial/ajax">Ajax</a> </li> </ul> </li> <li> <a href="/category/life">我的生活</a> <ul> <li class="nav-effect-1"> <a href="/category/life/college">College</a> </li> <li class="nav-effect-2"> <a href="/category/life/review">Review</a> </li> <li class="nav-effect-3"> <a href="/category/life/sentiment">Sentiment</a> </li> </ul> </li> <li> <a href="#">关于我</a> <ul> <li class="nav-effect-1"> <a href="/contribute">友情链接</a> </li> <li class="nav-effect-2"> <a href="/message">留言板</a> </li> </ul> </li> </ul> </nav></body></html>
css
*{ margin:0 auto;}body{ background-color: #EEEEEE; font-family: Microsoft Yahei,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-ul a{ text-decoration: none; color: #FFF; display: inline-block; padding: 10px 20px;}.nav-ul a:hover{ background-color: #1ABC9C;}.nav-ul a:hover+ul li{ opacity:1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}.nav-ul a+ul{ list-style: none; position: absolute; transition: opacity 0.5s; -webkit-perspective: 800; -webkit-transform-style: preserve-3d;}.nav-ul a+ul:hover li{ opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}.nav-ul a+ul li{ position: relative; left: -40px; opacity: 0; width: 150px; transition: transform 1.5s,opacity 0.8s;}.nav-ul a+ul a{ 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-ul a+ul a:hover{ background-color: rgba(69,85, 82, 0.75);} 查看demo：demo
原文出处：http://www.ido321.com/1547.html
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html 页面文本框滚动条问题，求教_html/css_WEB-ITnoseNext article：HTML中嵌入FLV视频文件_html/css_WEB-ITnose