HTML布局思路:
1.因为圆形整体缩放,故需要所有其他元素需要相对于同一个父级元素进行绝对定位。
2.实现脱离于圈外的白色小球运动,需要某一元素容纳小球,由该元素其实现旋转功能。
代码如下:
CSS注意事项:
1. 绝对定位的计算如下:
2.元素优先级
3.css3中animation,transform-origin,transform属性的应用
4.canvas :rotate() 方法旋转当前的绘图;scale()方法缩放当前绘图至更大或更小。
代码如下:
JS:
一圈旋转7.5s,吸气呼气分别3s,保持时间1.5s;
setTimeout( )方法进行时间控制;
setInterval( )实现周期性活动。
代码如下: