关键词：animation 动画 垂直居中方法，伪元素，transform-origin ，transform(变形）
目的：实现Apple watch 圆环转动
./ 代表当前目录，同一级的
../ 上一级目录
/ 当前根目录，是相对目录
1.如何让盒子在网页中垂直水平居中（第一种方法）
position:absolute;
top:0; left:0; right:0; botton:0;
margin:auto;
2.如何让盒子在网页中垂直水平居中（第二种方法）
position:absolute;
top:50%; left:50%;
trasform:translate(-50%,-50%);
3. border-radius: 50%; //让一个盒子变成圆
border-radius: 0 8em 8em 0;//效果如下图
4. 伪元素（伪元素相当于是对当前元素的装潢，他们并不是节点，不会出现在dom树中，但是在显示上具备节点的效果）
a. ::after ::before 前面的两个冒号也可以写成一个冒号 ，即 :after :before
b. ::after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素
c. 这两个元素默认是内联元素,要使height元素有效的话，要display:block或float
d. 必须设置content，否则这两个伪元素是无法显示出来的.
e. content属性，会作为这两个伪元素的内容嵌入他们中,比如，
ello Worl
5. transform-origin (改变元素的原点位置)
a. 默认情况下，变形的原点在中心点，即 transform-origin: 50% 50%;
b. transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词
c. 2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置
c. 3D的变形中，z-axis，用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0 。
d.
top = top center = center top = 50% 0
right = right center = center right = 100%或(100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50%或（50% 50%）
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%
e.CSS3变形中旋转、缩放、倾斜都可以通过transform-origin属性重置元素的原点,但其中的位移translate()始终以元素中心点进行位移.
6.calc()函数在CSS3的用法
7.CSS动画制作之transform(变形)
a. 在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
b. rotate:旋转 transform:rotate(30deg) 在设置旋转角度之前，必须要先设置transform-origin
c. translate(移动) 分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动） 例子：transform:translate(x,y);
d. scale(缩放) scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放） 缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
e. skew(扭曲) skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
f. 矩阵matrix 略
8. animation 动画
语法格式：animation:name keeping-time animate-function delay times iteration final
例子： animation: boom 6s ease 1s infinite normal none
name: 动画的名称，自定义
keeping-time : 持续时间，s 和 ms 均可。
animate-function: 运动方式（动画方式）的贝赛尔曲线，可取值为：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
delay: 动画延迟执行的时间
times：动画循环执行的次数，无单位，infinite为无限循环
iteration: 如果动画循环，循环的方式是：alternate(偶数次向前播放，奇数次向后播放)、normal(每次都向前播放)
final : 动画的最后（达到100%）时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both
关键帧(@keyframes) 定义动画在不同阶段的状态
格式：@keyframes + 动画名字 {
0%{} 50%{} 75%{} 100%{}
}
备注：此文章根据实例总结而来，访问更多请点我的github