之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周。形成一个环形。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

  1. <div class="container">
  2. <h1>
  3. Cool Open/Close menu in full CSS</h1>
  4. <input type="checkbox" id="menu_opener_id" class="menu_opener">
  5. <label for="menu_opener_id" class="menu_opener_label">
  6. </label>
  7. <div class="barre_hamburger">
  8. </div>
  9. <a href="#" class="link_one link_general"></a><a href="#" class="link_two link_general">
  10. </a><a href="#" class="link_three link_general"></a><a href="#" class="link_four link_general">
  11. </a></input>
  12. </div>

css代码:

  1. body
  2. {
  3. background: #34495e;
  4. }
  5.  
  6. .container
  7. {
  8. width: 550px;
  9. display: block;
  10. margin: auto;
  11. position: relative;
  12. }
  13.  
  14. h1
  15. {
  16. text-align: center;
  17. font-family: 'Roboto' , sans-serif;
  18. font-weight:;
  19. color: #f1c40f;
  20. }
  21.  
  22. .menu_opener
  23. {
  24. display: none;
  25. }
  26.  
  27. .menu_opener:checked ~ .link_one
  28. {
  29. top: 65px;
  30. }
  31. .menu_opener:checked ~ .link_two
  32. {
  33. left: 385px;
  34. }
  35. .menu_opener:checked ~ .link_three
  36. {
  37. top: 385px;
  38. }
  39. .menu_opener:checked ~ .link_four
  40. {
  41. left: 65px;
  42. }
  43. .menu_opener:checked ~ .barre_hamburger
  44. {
  45. opacity:;
  46. }
  47. .menu_opener:checked ~ .menu_opener_label:after
  48. {
  49. transform: rotate(45deg);
  50. top: 70px;
  51. }
  52. .menu_opener:checked ~ .menu_opener_label:before
  53. {
  54. transform: rotate(-45deg);
  55. top: 70px;
  56. }
  57.  
  58. .menu_opener_label
  59. {
  60. background: #f1c40f;
  61. width: 150px;
  62. height: 150px;
  63. display: block;
  64. cursor: pointer;
  65. border-radius: 50%;
  66. position: absolute;
  67. top: 200px;
  68. left: 200px;
  69. z-index:;
  70. }
  71. .menu_opener_label:after
  72. {
  73. position: absolute;
  74. top: 50px;
  75. left: 50px;
  76. background: #000;
  77. content: "";
  78. width: 50px;
  79. height: 10px;
  80. -webkit-transition: all 0.4s ease;
  81. transition: all 0.4s ease;
  82. }
  83. .menu_opener_label:before
  84. {
  85. position: absolute;
  86. top: 90px;
  87. left: 50px;
  88. background: #000;
  89. content: "";
  90. width: 50px;
  91. height: 10px;
  92. -webkit-transition: all 0.4s ease;
  93. transition: all 0.4s ease;
  94. }
  95.  
  96. .barre_hamburger
  97. {
  98. width: 50px;
  99. height: 10px;
  100. position: absolute;
  101. top: 270px;
  102. left: 250px;
  103. background: #000;
  104. z-index:;
  105. -webkit-transition: all 0.4s ease;
  106. transition: all 0.4s ease;
  107. }
  108.  
  109. .link_general
  110. {
  111. width: 100px;
  112. height: 100px;
  113. display: block;
  114. border-radius: 50%;
  115. position: absolute;
  116. top: 225px;
  117. left: 225px;
  118. background: #ecf0f1;
  119. -webkit-transition: all 0.4s ease;
  120. transition: all 0.4s ease;
  121. }
  122.  
  123. .link_one
  124. {
  125. background: url("home.png") #f1c40f no-repeat center center;
  126. }
  127.  
  128. .link_two
  129. {
  130. background: url("mail.png") #f1c40f no-repeat center center;
  131. }
  132.  
  133. .link_three
  134. {
  135. background: url("set.png") #f1c40f no-repeat center center;
  136. }
  137.  
  138. .link_four
  139. {
  140. background: url("start.png") #f1c40f no-repeat center center;
  141. }

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/7957

一款纯css3实现的环形导航菜单的更多相关文章

  1. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  2. 纯css3实现的动画导航菜单

    测试咯 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特效代码 网页模板 图片素材 css3 前端特 ...

  3. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  4. 一款纯css3实现的响应式导航

    之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览   源码下载 实现的代码. html代码: <di ...

  5. 一款纯css3实现的动画加载导航

    之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul ...

  6. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  7. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  8. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

  9. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

随机推荐

  1. Loadrunner脚本回放 场景运行过程中常见错误分析

    问题一:Loadrunner超时错误问题描述 Loadrunner超时错误:在录制Web协议脚本回放时超时情况经常出现,产生错误的原因也有很多,解决的方法也不同. 问题现象Error -27728: ...

  2. document.body、document.documentElement和window获取视窗大小的差别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...

  3. Ubuntu共享WiFi(AP)给Android方法

    更新: 2012-03-03      Android是不支持Ad-hoc模式的WiFi.Windows 7软AP一个还是比较简单的.本文介绍在Ubuntu下实现软AP.(需要你的无线网卡支持AP哈) ...

  4. IDEA编辑区光标样式修改

    转自:http://blog.csdn.net/aosica321/article/details/52787418 Intellj IDEA光标为insert状态,无法删除内容以前用得是社区版的ID ...

  5. Swing(Java)--维基百科

    Swing是一个为Java设计的GUI工具包.Swing是Java基础类的一部分.Swing包括了图形用户界面(GUI)组件如:文本框,文本域,按钮,分隔窗格和表. Swing提供许多比AWT更好的屏 ...

  6. Oralce进程信息查看,Oracle的锁表与解锁

    参考: oracle查看锁表进程,杀掉锁表进程 Oracle的锁表与解锁 查看锁表进程SQL语句: select * from v$session t1, v$locked_object t2 whe ...

  7. 由ConcurrentLinkedQueue扯到线程安全 待整理

    前几天项目总是报错,找了下原因. ConcurrentLinkedQueue 本身是一个基于链接节点的无界线程安全队列,你自己调用就不用考虑线程安全了吗? 结论是:原子性操作当然是线程安全的,非原子性 ...

  8. Augular初探

    一年多前,巧遇angular,觉得是个非常优秀的mv*框架,当时项目使用了MooTools.因此也没继续研究.刚好最近,同事组中有用到ng,并且要做个分享.因此就将from Why Does Angu ...

  9. PO_标准内部请购内部采购单抛转订单模组(流程)

    2014-06-03 Created By BaoXinjian

  10. ios学习之旅--oc对象的关系

    1.匿名对象:就是没有名字对象     1.匿名对象仅用一次     使用场景:     1.当我们仅仅要调用一个对象的某个方法一次的时候能够使用匿名对象 2.匿名对象能够作为函数的实际參数 #imp ...