建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源！

网站模板_网站源码_网站素材_建站教程_建站学习网

浏览排行榜

浏览排行榜

浏览排行榜

浏览排行榜

浏览排行榜

当前位置：建站学习网 > DIV+CSS教程 > CSS布局实例 >

CSS3的一个简单导航栏实现

更新时间：2017-01-08整理编辑：建站学习网阅读：0

 

 
 

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

html

XML/HTML Code复制内容到剪贴板
  1. <nav>
  2. <ul class="nav-ul">
  3. <li>
  4. <a href="/">首页</a>
  5. </li>
  6. <li>
  7. <a href="/category/frontend">Web前端</a>
  8. <ul>
  9. <li class="nav-effect-1">
  10. <a href="/category/frontend/javascript">JavaScript</a>
  11. </li>
  12. <li class="nav-effect-2">
  13. <a href="/category/frontend/jq">JQuery</a>
  14. </li>
  15. <li class="nav-effect-3">
  16. <a href="/category/frontend/style">CSS</a>
  17. </li>
  18. <li class="nav-effect-4">
  19. <a href="/category/frontend/html">HTML</a>
  20. </li>
  21. </ul>
  22. </li>
  23. <li>
  24. <a href="/category/end">后端</a>
  25. <ul>
  26. <li class="nav-effect-1">
  27. <a href="/category/end/python-end">Python</a>
  28. </li>
  29. <li class="nav-effect-2">
  30. <a href="category/end/php">PHP</a>
  31. </li>
  32. </ul>
  33. </li>
  34. <li>
  35. <a href="/category/trivial">琐碎杂类</a>
  36. <ul>
  37. <li class="nav-effect-1">
  38. <a href="/category/trivial/linux">Linux</a>
  39. </li>
  40. <li class="nav-effect-2">
  41. <a href="/category/trivial/ajax">Ajax</a>
  42. </li>
  43. </ul>
  44. </li>
  45. <li>
  46. <a href="/category/life">我的生活</a>
  47. <ul>
  48. <li class="nav-effect-1">
  49. <a href="/category/life/college">College</a>
  50. </li>
  51. <li class="nav-effect-2">
  52. <a href="/category/life/review">Review</a>
  53. </li>
  54. <li class="nav-effect-3">
  55. <a href="/category/life/sentiment">Sentiment</a>
  56. </li>
  57. </ul>
  58. </li>
  59. <li>
  60. <a href="#">关于我</a>
  61. <ul>
  62. <li class="nav-effect-1">
  63. <a href="/contribute">友情链接</a>
  64. </li>
  65. <li class="nav-effect-2">
  66. <a href="/message">留言板</a>
  67. </li>
  68. </ul>
  69. </li>
  70. </ul>
  71. </nav>

css:

CSS Code复制内容到剪贴板
  1. *{
  2. margin:0 auto;
  3. }
  4. body{
  5. background-color: #EEEEEE;
  6. font-family: Microsoft Yahei,Arial,sans-serif;
  7. }
  8. nav{
  9. width: 100%;
  10. background-color: #455552;
  11. position: relative;
  12. width: 650px;
  13. margin-top: 100px;
  14. }
  15. .nav-ul{
  16. list-style: none;
  17. }
  18. .nav-ul>li{
  19. display: inline-block;
  20. position: relative;
  21. }
  22. .nav-ul a{
  23. text-decoration: none;
  24. color: #FFF;
  25. display: inline-block;
  26. padding: 10px 20px;
  27. }
  28. .nav-ul a:hover{
  29. background-color: #1ABC9C;
  30. }
  31. .nav-ul a:hover+ul li{
  32. opacity:1;
  33. -webkit-transform: rotateY(0deg);
  34. transform: rotateY(0deg);
  35. }
  36. .nav-ul a+ul{
  37. list-style: none;
  38. position: absolute;
  39. transition: opacity 0.5s;
  40. -webkit-perspective: 800;
  41. -webkit-transform-style: preserve-3d;
  42. }
  43. .nav-ul a+ul:hover li{
  44. opacity: 1;
  45. -webkit-transform: rotateY(0deg);
  46. transform: rotateY(0deg);
  47. }
  48. .nav-ul a+ul li{
  49. position: relative;
  50. left: -40px;
  51. opacity: 0;
  52. width: 150px;
  53. transition: transform 1.5s,opacity 0.8s;
  54. }
  55. .nav-ul a+ul a{
  56. display: inline-block;
  57. width: 75%;
  58. background-color: rgba(26,188, 156, 0.75);
  59. }
  60. .nav-effect-1{
  61. transform: rotateY(90deg) translateX(10px);
  62. }
  63. .nav-effect-2{
  64. transform: rotateY(120deg) translateX(20px);
  65. }
  66. .nav-effect-3{
  67. transform: rotateY(150deg) translateX(30px);
  68. }
  69. .nav-effect-4{
  70. transform: rotateY(180deg) translateX(40px);
  71. }
  72. .nav-ul a+ul a:hover{
  73. background-color: rgba(69,85, 82, 0.75);
  74. }

查看demo：demo

本文网址：https://www.dedexuexi.com/divcss/bj/2326.html

本站部分文章搜集与网络，如有侵权请联系本站，转载请说明出处。

标签：前端
收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
 微信打赏
通过css加载远程字体示例代码
« 上一篇2017年01月08日
CSS3实现漂亮的按钮动画
2017年01月08日下一篇 »
  • CSS Wave滤镜用法示例

    CSS Wave滤镜用法示例

    0阅读
    CSS Wave滤镜可能很多朋友并不喜欢用，其实用的好了，可以有不少奇异效果。CSS Wave滤镜可把对象按垂直方向叠加波形样式，使对象年上去像波浪一样。语法示例：filter:wave(add=add,freq=freq,lightst
  • CSS写的简单表格示例

    CSS写的简单表格示例

    0阅读
    使用CSS写表格，不要有所怀疑，主要是对html结构进行css样式重定义，大家可以看看效果图，个人感觉还不错，感兴趣的朋友可以参考下 复制代码 代码如下: !DOCTYPE HTML html head meta http-equiv=Conte
  • 纯CSS代码实现翻页

    纯CSS代码实现翻页

    0阅读
    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd html xmlns=http://www.w3.org/1999/xhtml xml:la...
  • 表格列表偶数列、奇数列的CSS样式示例

    表格列表偶数列、奇数列的CSS样式示例

    0阅读
    表格列表CSS样式包括：偶数列、奇数列、鼠标经过时样式、标题列等等，在接下来的示例中将为大家完美呈现，感兴趣的朋友不要错过 HTML示例源代码： 复制代码 代码如下: table class=list_table
  • 用CSS3创建一个旋转可变色按钮

    用CSS3创建一个旋转可变色按钮

    0阅读
    先从HTML: div a class=button旋转按钮/a /div 和现在的CSS: .button { background:#aaa; color:#555; font-weight:bold; font-size:15px; padding:10px 15px; border:none...
精品模板更多
热点文章
相关标签
交互设计教程指南针同级栏目家居用品jQuery设计入门教程工具面板栏目路径dedems建筑装饰焦点图学习交互设计空遮照background用法示范机械设备幻灯片安装环境马赛克size在线教育手机触屏基本结构照片指定文章企业模板html5版本天气预报仪器设备
 
QQ在线咨询
加入VIP
建站咨询
开发修改
QQ交流群

添加微信客服