动画效果的实现
关于360图片的动画位移效果：
先是搜集相关的图片，之后用Photoshop将图片抠出来。
用sublime text3写出相关的代码。链接相关的css样式；
图片用background-position来定义它的位置
然后用定位将图片固定在同一个位置，因为它要实现位移效果所以要在样式里添加声明动画的@keyframes 名字 {
from{
加入转换的属性
如：transform：translate(0px);
}
to{
如：transform：translate(200px);
}
}
然后调用动画属性
animation : 名称 时长（以s/ms为单位） 速度（ease,linear,ease-in,ease-out,ease-in-out） 延迟时间（以s/ms为单位） 动画执行的次数（具体数值、infinite：无限次播放）来是实现位移效果。
2D转换 - 位移
位移：位置移动
从当前元素的位置处，移动到指定坐标轴位置处
函数：
translate(x,y)
translate(value);
取值：
数值、百分比
去负值
x ：正 向右移动
负 向左移动
y : 正 向下移动
负 向上移动
单方向位移：
translateX(x)
translateY(y)
3d位移
改变元素在z轴上的位置
属性：transform:
函数：translateZ(z);
translate3d(x,y,z);
网易云音乐动画缩放效果
因为要实现缩放效果所以要在样式里添加声明动画的@keyframes 名字 {
from{
加入转换的属性
如：transform：scale(0.2);
}
to{
如：transform：scale(0.4);
}
}
然后调用动画属性
animation : 名称 时长（以s/ms为单位） 速度（ease,linear,ease-in,ease-out,ease-in-out） 延迟时间（以s/ms为单位） 动画执行的次数（具体数值、infinite：无限次播放）来是实现缩放效果。
2D转换 - 缩放
缩放：改变元素大小
函数：scale(value)
scale(x,y)
取值：
默认值 1
缩小：0 - 1 之间的小数
放大：大于1
scaleX(x) : 横向缩放
scaleY(y) : 纵向缩放
loading的动画旋转效果
因为要实现旋转效果所以要在样式里添加声明动画的@keyframes 名字 {
from{
加入转换的属性
如：transform：rotate(0deg);
}
to{
如：transform：srotate(360deg);
}
}
然后调用动画属性
animation : 名称 时长（以s/ms为单位） 速度（ease,linear,ease-in,ease-out,ease-in-out） 延迟时间（以s/ms为单位） 动画执行的次数（具体数值、infinite：无限次播放）来是实现旋转效果。
圆里面的loading文字要用定位position来实现这样做有利于在其他浏览器上样式不会乱码。
2D转换 - 旋转
围绕着指定点，按照指定的角度发生的旋转
函数：rotate(deg)
取值：deg 为角度 0-360
默认为顺时针旋转
deg取值为负的话，则将逆时针旋转
3d旋转
属性：transform
函数：
rotateX(deg);
rotateY(deg);
rotateZ(deg)
rotate3d(x,y,z,deg);
x,y,z : 取值为 1，0，-1
rotate3d(-1,0,1,45deg);
相关知识的复习：
动画属性(调用)
1、animation-name : 调用动画的名称，指定 @keyframes 的名字
2、animation-duration:动画执行的时常以 s或ms
3、animation-timing-function:动画执行时的速度效果
取值 ease,linear,ease-in,ease-out,ease-in-out
4、animation-delay:延迟时间，以s或ms为单位
5、animation-iteration-count
动画执行的次数
取值 ：
1、具体数值
2、infinite : 无限次播放
6、animation-direction : 动画播放方向
取值：
normal
alternate :
奇数次播放为正向播放(状态从from - to)
偶数次播放为逆向播放(状态从to - from)
7、动画综合属性 : animation:mingcheng 2s ease 1s 3
ainimation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode
指定动画在播放之前或之后的效果
none : 默认行为
forwards:动画完成后，保持最后一个状态
backwards : 动画显示之前，保持在第一个状态
both:动画完成后，动画显示前，都被相应的状态所保持着。
9、animation-play-state
定义动画播放状态
配合着 Javascript使用，用于播放过程中暂停动画
取值：
paused ：暂停
running ：播放