原作者的解析（英文）：http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/

原作者的解析（译文）：http://developer.51cto.com/art/201404/437152.htm

本文非转载，为个人原创解析，转载请先联系博主，谢谢~

首先，看看html的结构：

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>kissy  |  TaoBaoUED</title>
  5.  
  6.     <link rel="stylesheet" href="style.css" type="text/css" media="all">
  7.     <script src="jquery-1.3.2.js"></script>
  8.     <script src="ext.js"></script>
  9. </head>
  10. <!-- Demo by http://creative-punch.net -->
  11. <!-- Modified by xzh - 20140701 -->
  12.  
  13. <nav class="circular-menu">
  14.   <div class="circle">
  15.     <a href="">●</a>
  16.     <a href="">■</a>
  17.     <a href="">◆</a>
  18.     <a href="">♦</a>
  19.     <a href="">★</a>
  20.     <a href="">卍</a>
  21.     <a href="">卐</a>
  22.     <a href="">♥</a>
  23.   </div>
  24.   <a href="#" class="menu-button fa fa-bars fa-2x">A</a>
  25. </nav>
  26.  
  27. <h1 class="author">Demo by <a href="" target="">Creative Punch</h1></span></span>

——Css完整代码请参见文章最后。

——Js完整代码请参见文章最后。

然后，看下页面：

图1-1

一开始，只有两个是“可见”的元素，一个的类是.menu-button，另一个的类是.circular-menu，因为按钮的position属性要设置在absolute，所以它的父元素外框.menu-button设置position为relative，现在分析.menu-button的属性：

1、  top和left的值为calc(50% - 30px)，50%很好理解，30px是怎么来的呢？注意到，height和left都为40px，而绝对位置的top和left属性分别表示元素左上角相对上方和左方的距离，如图1-2，为了让元素的中心点居中，距离应该减去元素的长宽的一半，但是它的长宽都是20px，为什么是减30px呢？原因在于它的padding属性为10px，相当于给它的长宽分别增加了20px。

得（30px = 40px/2 +10px）

图1-2

2、 line-height和height都为40px，使得文字能够垂直居中。

3、 border-radius:50%，圆形。

4、 display:block，删掉好像没什么影响。

再看被“隐藏”了的.circle，它里面装了几个<a>标签，它的透明度为0，还设置了CSS3的动画——transform和transition。其中，transition: all 0.4s ease-out为一打开网页时看到几个白点突然藏到大按钮背后的效果就是它干的，解释一下意思，所有属性在0.4s内渐渐消失，其实完整的它是有4个参数的。单击按钮后，为div切换一个类.open，

  1. .open.circle {
  2.   opacity: 1;
  3.  
  4.   -webkit-transform: scale(1);
  5.   -moz-transform: scale(1);
  6.   transform: scale(1);
  7. }

渐显/渐隐，从0倍放大到1倍，变成图1-3的样子。

图1-3

现在，让我们去看看js代码，document加载之后为各个小<a>添加了top和left属性，为了更加容易被看懂，我稍微修改了一下原demo代码，如下：

  1. items[i].style.left = (50 - 35*Math.cos(2*Math.PI*i/len)).toFixed(4) + "%";
  2. items[i].style.top = (50 + 35*Math.sin(2*Math.PI*i/len)).toFixed(4) + "%";

35后面的一块意思是，从一个点开始，经历2π，期间2π平分成多少个点取决于<a>的个数，例如我们例子，<a>有8个，从x=0开始，正向取2π，将2π平分成8段，依次取8个点，他们的y值如图1-4所示，我们可以看到，8个点上的y值变化不正符合我们的圆圈位置变化规律么？35的意思是，让top和left最多取85%，最小取15%。

图1-4

举一反三：

1、 上面说了，2π被分成几段取决于<a>的个数，试着增删几个<a>看看吧。

2、 上面的代码是从0开始正向取2π的，试着改一下吧，注意始终不变的东西是2π*i/len，你可以作加减一些东西，或者为它添加负号之类的改动，特别地，加减一些东西的时候，如加上π/5，因为影响的是第一个点的取值，间接影响其他点的值，你会发现，所有<a>组成的圆圈好像被人顺/逆时针轻轻拧了一下，具体效果是怎样的，你可以尝试弄出来看一下。

现在回过来看样式，.circle a中需要注意的的是margin-left和margin-top，还记得我们刚刚说的.menu-button中的left和top属性吗？对，两者都是差不多的意思，让我们回过来看图1-3，图中虚线框位置为我们没有设置margin-left和margin-top时的位置，同样地，我们取margin-left和margin-top为<a>元素的长宽的一半，记得负号。

触类旁通：

都说了跟前面的.menu-button差不多，那我们就不设置margin-top和margin-left了，那怎么改？

答：（字体颜色为白色，全选文字可见-->在js里，items[i].style.left和items[i].style.top都减20px即可<--）

忘了说，注意如果还有border的时候，同样需要减去border的值。

最后，谢谢你认真看完了，不足之处，欢迎指出！

完整js和css代码如下：

  1. $(document).ready(function(){
  2.   // Demo by http://creative-punch.net
  3.   // Modified by xzh - 20140701
  4.   var items = document.querySelectorAll('.circle a');
  5.   for(var i = 0, len = items.length; i < len; i++) {
  6.     items[i].style.left = (50 - 35*Math.cos(2*Math.PI*i/len)).toFixed(4) + "%";
  7.     items[i].style.top = (50 + 35*Math.sin(2*Math.PI*i/len)).toFixed(4) + "%";
  8.     console.log(items[i].style.left+"  "+items[i].style.top);
  9.   }
  10.  
  11.   document.querySelector('.menu-button').onclick = function(e) {
  12.     e.preventDefault();
  13.     document.querySelector('.circle').classList.toggle('open');
  14.   }
  15. });
  1. /* Demo by http://creative-punch.net */
  2. /* Modified by xzh - 20140701 */
  3. body {
  4.   background: #39D;
  5. }
  6.  
  7. .circular-menu {
  8.   width: 250px;
  9.   height: 250px;
  10.   margin: 0 auto;
  11.   position: relative;
  12. }
  13.  
  14. .circle {
  15.   width: 250px;
  16.   height: 250px;
  17.   opacity: 0;
  18.  
  19.   -webkit-transform: scale(0);
  20.   -moz-transform: scale(0);
  21.   transform: scale(0);
  22.  
  23.   -webkit-transition: all 0.4s ease-out;
  24.   -moz-transition: all 0.4s ease-out;
  25.   transition: all 0.4s ease-out;
  26. }
  27.  
  28. .open.circle {
  29.   opacity: 1;
  30.  
  31.   -webkit-transform: scale(1);
  32.   -moz-transform: scale(1);
  33.   transform: scale(1);
  34. }
  35.  
  36. .circle a {
  37.   text-decoration: none;
  38.   color: white;
  39.   display: block;
  40.   height: 40px;
  41.   width: 40px;
  42.   line-height: 40px;
  43.   margin-left: -20px;
  44.   margin-top: -20px;
  45.   position: absolute;
  46.   text-align: center;
  47. }
  48.  
  49. .circle a:hover {
  50.   color: #eef;
  51. }
  52.  
  53. .menu-button {
  54.   position: absolute;
  55.   top: calc(50% - 30px);
  56.   left: calc(50% - 30px);
  57.   text-decoration: none;
  58.   text-align: center;
  59.   color: #444;
  60.   border-radius: 50%;
  61.   display: block;
  62.   height: 40px;
  63.   width: 40px;
  64.   line-height: 40px;
  65.   padding: 10px;
  66.   background: #dde;
  67. }
  68.  
  69. .menu-button:hover {
  70.   background-color: #eef;
  71. }
  72.  
  73. /* Author stuff */
  74. h1.author {
  75.   text-align:center;
  76.   color: white;
  77.   font-family: Helvetica, Arial, sans-serif;
  78.   font-weight: 300;
  79. }
  80.  
  81. h1.author a {
  82.   color: #348;
  83.   text-decoration:none;
  84. }
  85.  
  86. h1.author a:hover {
  87.   color: #ddd;
  88. }

解析：用 CSS3 和 JavaScript 制作径向动画菜单的更多相关文章

  1. 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

    摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...

  2. HTML5,CSS3 与 Javascript 制作视频播放器

    早一段时间,有一直研究 HTML5 和 CSS3 ,自己也做了不少 Demo ,只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器,因此特别想做一个自己喜欢的设计,考虑 ...

  3. CSS3学习笔记之径向展开菜单

    效果截图: HTML代码: <div class="menu-wrap"> <nav> <a href="" class=&quo ...

  4. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  5. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  6. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  7. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  8. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  9. Scrollanim – CSS3 & JavaScript 创建滚动动画

    Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...

随机推荐

  1. 理解js异步的概念

    js引擎在执行的时候是单线程的,这是大家都知道的.我们先来看一段代码: <html> <head> <meta http-equiv="Content-Type ...

  2. 《think in python》学习-8

    字符串 字符串是一个序列,可以用方括号操作符来访问字符串中的单独字符 fruit = 'banana' letter = fruit[1] 方括号中的表达式称为下标 下标从0 开始 任何表达式,包括变 ...

  3. IOS支付宝支付出现6002问题的解决办法

    运行支付宝官方demo进行支付测试,会出现6002-网络连接错误,是因为以iOS9 SDK编译的工程会默认以SSL安全协议进行网络传输,即HTTPS,如果依然使用HTTP协议请求网络会报系统异常并中断 ...

  4. 【Tomcat】项目自动部署的链接重置错误

    在服务器中装好的tomcat7 ,(服务器是的window server 2008) 在tomcat bin目录运行的 service.bat install 安装服务.然后,设置服务项(服务项名称: ...

  5. [stack]Evaluate Reverse Polish Notation

    Total Accepted: 55722 Total Submissions: 249668 Difficulty: Medium Evaluate the value of an arithmet ...

  6. PCL点云库增加自定义数据类型

    #include <pcl/filters/passthrough.h> #include <pcl/filters/impl/passthrough.hpp> // the ...

  7. js常用DOM操作

    在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...

  8. div中嵌套div速度将会同样很慢

    ---恢复内容开始--- div中嵌套了div速度将会同样很慢   最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div ...

  9. SQL Server 的 3 种连接

    第一种 1. nested loop: select * from tableA inner join tableB on tableA.X = tableB.X; 它的执行过程是这样的.对于tabl ...

  10. 学习使用Free RTOS ，移植最新的STM32 v3.5固件库

    最近拿到了一块万利的EK-STM32F的学习板,打算先用它来熟悉下STM32的编程环境,不过在这过程中和一个同事聊的时候觉得如果只调用STM32的库写程序,可能在芯片资源的利用上面可能就会差一点,在这 ...