CSS3实现酷炫导航_html/css_WEB-ITnose
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-06-24 11:44:55
上面是一个效果图,代码在下面:
html
1 | <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
1 | *{ 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
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
-
2025-02-26 03:58:14
-
2025-02-26 03:38:10
-
2025-02-26 03:17:10
-
2025-02-26 02:49:09
-
2025-02-26 01:08:13
-
2025-02-26 00:46:10
-
2025-02-25 23:42:08
-
2025-02-25 22:50:13
-
2025-02-25 21:54:11
-
2025-02-25 20:45:11
最新问题
-
2025-03-19 15:13:34
-
2025-03-19 15:12:35
-
2025-03-19 15:10:55
-
2025-03-19 15:10:25
-
2025-03-19 15:08:32