Home >Web Front-end >HTML Tutorial >CSS3 implements cool navigation_html/css_WEB-ITnose
CSS3 implements cool navigation_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:55811browse
The above is a rendering, the code is below:
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); } View demo: demo
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