文章目录
  1. 1. 效果预览
  2. 2. 知识点
    1. 2.1. 主要知识点
      1. 2.1.1. 缩放 scale
      2. 2.1.2. 定位之绝对定位
      3. 2.1.3. 位置计算-圆的极坐标
    2. 2.2. 辅助知识点
      1. 2.2.1. 过渡 Transition
      2. 2.2.2. 不透明度 opacity
      3. 2.2.3. 垂直居中之 translate
      4. 2.2.4. border
  3. 3. 扩展练习
  4. 4. 更多

效果预览

效果说明:径向展开子菜单,展开过程淡入淡出
效果源码:http://codepen.io/anjia/pen/qEyXNR

知识点

主要知识点

缩放 scale

scale 属于 CSS3 2D 转换 的一种效果。
scale() 根据给定的宽度(X 轴)和高度(Y 轴)参数改变元素的尺寸,让其放大或缩小。
eg.
transform: scale(2,4); 意思是把元素的宽度变为原来的2倍 高度变为原来的4倍
transform: scale(2); 意思是把元素的宽度和高度都变为原来的2倍

定位之绝对定位

position: absolute; 生成绝对定位的元素。相对于第一个 position 不是 static 的父元素进行定位。
CSS 详细的定位机制,等过几天有空了新更篇博客,最近找房租房搬家一摊事刚(hai mei)折腾完 =_=。

位置计算-圆的极坐标

极坐标系是用 (r,θ) 来表示平面中的任意一点。r 代表半径,θ 代表极角(方位角),极轴就是平面直角坐标系中 X 轴的方向。如图1
圆的极坐标轴如图2,圆的极坐标方程是:x=rcos(θ),y=rsin(θ)
网页中的直角坐标轴如图3。
综合以上即可轻松地算出每个子菜单的目标位置 (left, top),具体的算法可参考源码。

辅助知识点

过渡 Transition

CSS3 的过渡属性 transition:允许 CSS 的属性值在一定时间区间内平滑的过渡。

语法:
transition: transition-property transition-duration transition-timing-function transition-delay
transition: 执行过渡效果的属性 完成过渡效果的持续时间 过渡效果的速度曲线 过渡效果何时开始的延迟时间
transition: 属性 持续时间 动画方式 延迟

举例:
transition: width 5s ease-in-out 1s;
意思是:当元素的 width 值发生改变时,该变化会持续 5s 来慢慢完成。动画是慢开始再慢结束。且需延迟 1s 再开始动画。

说明:
过渡的点就在于:让动画看起来不那么突兀,平滑一些。动画的利器,简单实用。
当要声明多个属性的过渡时,用逗号 , 隔开,然后各自设置各自的持续时间、变化速率、延迟。

动画方式:
过渡的动画速度,现有的属性值:
linear 匀速
ease 慢速开始-变快-慢速结束
ease-in 以慢速开始,加速运动
ease-out 以慢速结束,减速运动
ease-in-out 慢速开始和慢速结束,先加速再减速
cubic-bezier 自定义cubic-bezier曲线,所有值在[0,1]区域内

参考:
w3school:http://www.w3school.com.cn/cssref/pr_transition.asp
w3cplus:http://www.w3cplus.com/content/css3-transition

不透明度 opacity

不透明度 opacity
opacity:元素的不透明度,值 [0.0, 1.0] 即 [完全透明, 完全不透明]
ie8- 用替代属性 filter: alpha(opacity=50); 值是 [1, 100]

后两个动画透明度 opacity 和transition 算是锦上添花的小细节,这会让子菜单在展开的过程中变化更细腻些。有时,这些小细节反而才是动画的精髓,我个人一直这么认为 (^.^)。动画不单是个装饰性的炫酷东东,更重要的是它基于场景的功能性作用,即向用户反馈信息的流动形式(比如这个交互效果 单击图片后放大)。

垂直居中之 translate

垂直居中有多种实现方式,此处用 CSS3 中的移动属性 translate 来实现。
原来的位置是灰色背景的框,目标位置是红色背景的框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
.wrap {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
.ori {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
background-color: gray;
}
.target {
background-color: red;
transform: translate(-50%, -50%);
}
</style>
<div class="wrap">
<div class="ori"></div>
<div class="ori target"></div>
</div>

border

用下面的这个例子来认识下 border 本身和边框半径 border-raduis

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style type="text/css">
/*border本身*/
.border {
width: 50px;
height: 50px;
border-style: solid;
border-width: 20px;
border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: black;
}
/*border半径*/
.border-radius {
border-radius: 50%;
}
/*用border可实现三角*/
.border-triangle {
width: 0;
height: 0;
}
</style>
<div class="border"></div>
<div class="border border-radius"></div>
<div class="border border-triangle"></div>

扩展练习

实现椭圆型菜单

实现任意角度区间、任意方向的菜单

扩展练习源码:http://codepen.io/anjia/pen/JoByoK

更多

讲解的视频:http://www.75team.com/archives/851
效果源码:http://codepen.io/anjia/pen/qEyXNR
扩展练习源码:http://codepen.io/anjia/pen/JoByoK

文章目录
  1. 1. 效果预览
  2. 2. 知识点
    1. 2.1. 主要知识点
      1. 2.1.1. 缩放 scale
      2. 2.1.2. 定位之绝对定位
      3. 2.1.3. 位置计算-圆的极坐标
    2. 2.2. 辅助知识点
      1. 2.2.1. 过渡 Transition
      2. 2.2.2. 不透明度 opacity
      3. 2.2.3. 垂直居中之 translate
      4. 2.2.4. border
  3. 3. 扩展练习
  4. 4. 更多