解析：用 CSS3 和 JavaScript 制作径向动画菜单
原作者的解析（英文）：http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/
本文非转载，为个人原创解析，转载请先联系博主，谢谢~
首先，看看html的结构：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>kissy | TaoBaoUED</title> <link rel="stylesheet" href="style.css" type="text/css" media="all">
<script src="jquery-1.3.2.js"></script>
<script src="ext.js"></script>
</head>
<!-- Demo by http://creative-punch.net -->
<!-- Modified by xzh - 20140701 --> <nav class="circular-menu">
<div class="circle">
<a href="">●</a>
<a href="">■</a>
<a href="">◆</a>
<a href="">♦</a>
<a href="">★</a>
<a href="">卍</a>
<a href="">卐</a>
<a href="">♥</a>
</div>
<a href="#" class="menu-button fa fa-bars fa-2x">A</a>
</nav> <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，
.open.circle {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
渐显/渐隐，从0倍放大到1倍，变成图1-3的样子。
图1-3
现在，让我们去看看js代码，document加载之后为各个小<a>添加了top和left属性，为了更加容易被看懂，我稍微修改了一下原demo代码，如下：
items[i].style.left = (50 - 35*Math.cos(2*Math.PI*i/len)).toFixed(4) + "%";
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代码如下：
$(document).ready(function(){
// Demo by http://creative-punch.net
// Modified by xzh - 20140701
var items = document.querySelectorAll('.circle a');
for(var i = 0, len = items.length; i < len; i++) {
items[i].style.left = (50 - 35*Math.cos(2*Math.PI*i/len)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(2*Math.PI*i/len)).toFixed(4) + "%";
console.log(items[i].style.left+" "+items[i].style.top);
}
document.querySelector('.menu-button').onclick = function(e) {
e.preventDefault();
document.querySelector('.circle').classList.toggle('open');
}
});
/* Demo by http://creative-punch.net */
/* Modified by xzh - 20140701 */
body {
background: #39D;
} .circular-menu {
width: 250px;
height: 250px;
margin: 0 auto;
position: relative;
} .circle {
width: 250px;
height: 250px;
opacity: 0; -webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); -webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
} .open.circle {
opacity: 1; -webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
} .circle a {
text-decoration: none;
color: white;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
} .circle a:hover {
color: #eef;
} .menu-button {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
text-decoration: none;
text-align: center;
color: #444;
border-radius: 50%;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
padding: 10px;
background: #dde;
} .menu-button:hover {
background-color: #eef;
} /* Author stuff */
h1.author {
text-align:center;
color: white;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
} h1.author a {
color: #348;
text-decoration:none;
} h1.author a:hover {
color: #ddd;
}
解析：用 CSS3 和 JavaScript 制作径向动画菜单的更多相关文章
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
- HTML5,CSS3 与 Javascript 制作视频播放器
早一段时间,有一直研究 HTML5 和 CSS3 ,自己也做了不少 Demo ,只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器,因此特别想做一个自己喜欢的设计,考虑 ...
- CSS3学习笔记之径向展开菜单
效果截图: HTML代码: <div class="menu-wrap"> <nav> <a href="" class=&quo ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- css3中的制作动画小总结
系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- Scrollanim – CSS3 & JavaScript 创建滚动动画
Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...
随机推荐
- iOS设计模式解析（三）适配器模式
适配器模式:将一个类的借口转换成客户端希望的另一个接口 有一个很直观的图: 例如 :电源适配器(将110V电压转换成220V电压,其中Traget是220V电压,adaptee就是110V电 ...
- zoj1183 Scheduling Lectures
这道题题意不想说了,跑了640ms,感觉水过去了,应该能通过单调队列优化,很长时间没碰已经不知道怎么写了,就说说现在的写法吧. 状态定义很关键:dp[i][j]把前j个topic放在前i堂课. 因为这 ...
- vim命令杂记
vim 实用命令. . . 命令重复上一次修改动作 >G 增加当前行到文档末尾处的缩进 C 相当于c$,更改当前位置 至 行尾的单词 S 相当于^c , 更改一行 : 重复上次的f命令所查找的字 ...
- js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值
js/jquery获取当前页面URL地址并判断URL字符串中是否包含某个具体值本文介绍jquery/js获取当前页面url地址的方法,在jquery与js中获取当前页面url方法是一样的,因为jque ...
- 带参数的URLconf
我们在Django建立helloworld自定义页面创建的页面,只能算是一个静态页,发起一个请求,返回一个固定的值,并不能满足我们动态的需求.今天我们创建一个带参数的URLconf,根据参数展示不同的 ...
- jchat：linux聊天程序3：服务器
makefile: jchat_server: main.o process.o sql.o gcc -o jchat_server main.o process.o sql.o -L/usr/lib ...
- jenkins中Deploy to container Plugin插件发布配置
参数详解: 第一项(WAR/EAR files):是war包的相对路径(相对于工作区路径,即在工作区中war包的相对路径.)如我的maven执行完成之后会在工作区的target目录下生成项目.war, ...
- secedit
secedit /export /cfg mytemplate.inf /log mylog.txt http://www.oracle-base.com/dba/script.php?categor ...
- WampServer下如何实现多域名配置
原文:WampServer下如何实现多域名配置 之前在学习跨域的时候,我写过一篇叫做WampServer下使用多端口访问的文章,默认的 localhost 采用的是 80 端口,能使用多端口访问的核心 ...
- docker网络-如何让外部网络访问容器资源
docker网络-如何让外部网络访问容器资源 安装httpd 服务: docker:/root# docker exec -it f63b2633d146 bash bash-4.1# yum ins ...