一、字体图标-iconfont

引入字体图标样式表iconfont.css

body写<i class="iconfont /*第一个类名固定的*/icon-favorites-fill/*第二个用什么图标用什么类名*/"></i>

网上没有图标的话，要svg图片，再上传到iconfont网站

二、平面转换-transform

1.位移：transform：transslate（水平移动距离，垂直移动距离）

.son{
    transition:all 0.5s;   /*位移时间*/ 
}                         /*padding会影响all，有padding时all改为写具体属性名*/
.father:hover .son{
    transform:translate(100px,50px);/*也可用百分比*/
}

2.旋转：rotate-----------------deg(角度)

transform:rotate(360deg);

3.转换原点origin

transform-origin:水平属性值 垂直属性值；                            
/*转换谁的中心点把选择器加到谁身上*/
/*属性值为方位名词 left center等       和px*/

ps：

1.transform具有层叠性，所以得写在一起

2.transform：translate（800px） rotate（360deg）；横向边走边滚

3.transform：rotate（360deg） translate（800px）；旋转中x轴改变，导致乱飞

4.缩放scale（中心点向四周缩放）/左上角缩放用改变w和h也可/

transform：scale（缩放倍数）；

opacity:透明

5.渐变

background-image：linear-gradient（
    transparent，
    rgba（0，0，0，.6）     /*透明渐变到.6的黑色*/   /*也可直接写多个颜色*/
）；

三、空间转换

1.位移

transform：transslate3d（x,y,z）;.需要搭配perspective使用，加给父级，取值像素值，建议800-1200实现透视效果（近大远小近实远虚）。

2.空间旋转：rotateZ/和平面旋转一样/ rotateX rotateY

3.立体呈现：transform-style：preserve-3d/加给父级/

四、动画-animation

页面产生多个动态效果时使用

1.定义动画

@keytframes 动画名称{                 /*两个动态效果使用*/
    from {}
    to {}
}

@keyframes 动画名称{                  /*多个使用*/
    0%{}
    10%{}
    15%{}
    100%{}    
}

2.使用动画

animation：动画名称  动画花费时长；

3.动画复合属性

animation：/*逗号隔开可以定义多组动画*/

动画名称：

动画时长： s

速度曲线-timing-function：

1. 补间动画：加速、减速、匀速linear、

2.逐帧动画：steps（3）/*分3段执行*/

延迟时间： 1s /*1秒后执行*/

重复次数： 3 /*重复3次*/ 、 infinite /*无限循环*/

动画方向： alternate /*反向*/

执行完毕状态： backwards/*最初状态*/ forwards /*最终状态*/ /*使用此得去掉infinite 和反向*/

importent：当有两个时间时，默认第一个为动画时长，第二个为延迟时间。

4.逐帧动画-精灵动画制作步骤

1.准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

2.定义动画

改变背景图的位置/*移动的距离就是精灵图的宽度*/

3.使用动画

添加速度曲线steps（N），N与精灵图上小图个数相同

添加无限重复效果

移动端web