Github原生代码的前端简易小练习 Relaxer

HTML布局思路：

1.因为圆形整体缩放，故需要所有其他元素需要相对于同一个父级元素进行绝对定位。

2.实现脱离于圈外的白色小球运动，需要某一元素容纳小球，由该元素其实现旋转功能。

代码如下：

CSS注意事项：

1. 绝对定位的计算如下：

2.元素优先级

3.css3中animation，transform-origin，transform属性的应用

4.canvas :rotate() 方法旋转当前的绘图；scale()方法缩放当前绘图至更大或更小。

代码如下：

 

JS:

一圈旋转7.5s，吸气呼气分别3s，保持时间1.5s；

setTimeout( )方法进行时间控制；

setInterval( )实现周期性活动。

代码如下：