字体图标的使用

使用阿里图标库：www.iconfont.cn/

使用步骤：

1.选择图标库——选择图标——添加购物车——添加至项目——下载至本地

2.解压后打开文件夹，复制@font—face{ } ;代码

3.到相应的html里面复制代码即可

平面转换 transform

功能：transform属性可以实现元素的位移，旋转，缩放

位移写法（2D）

语法：transform:translate(水平移动距离，垂直移动距离);

括号取值范围：正负均可，单位是像素px,也可以写百分比。

注意：1.写一个值的时候默认水平。

2.X轴正向为右移动，Y轴正向为向下移动

3.单独设置某个方向移动的时候：可以写translateX()；或者Y

旋转写法

transform:rotate(角度) ；//单位是deg

取值为正时，则为顺时针旋转，取值为负时，则为逆时针旋转

旋转中心点设置

transform-origin: 原点水平位置 原点垂直位置；

取值：方位名词，像素单位，百分比；

复合写法：transform: translate() rotate(); //先位移后旋转

缩放写法

语法：transform: scale(X轴缩放倍数，y轴缩放倍数)； //不带单位

技巧：一般情况下，只为scale设置一个值，大于一是放大，小于一是缩小；

opacity是透明度属性。

背景渐变

语法：background-image:linear-gradient(颜色1, 颜色2))；

渐变设置方向：to top 上到下

（空间转换）3D

写法：transform: translate3d(x,y,z);

透视（加给父级）：perspective: 值；（一般800-1000）

近大远小，近实远虚的视觉效果

空间旋转

写法:transform:rotate3d(x,y,z);

x,y,z取值为0-1之间

立体呈现(写在父级上)

transform-style: preserve-3d;

使子元素处于真正的3d空间。

空间缩放

transform:scale3d(x,y,z);

动画

animation添加动画效果

animation-name: niang; 动画名称

animation-duration: 2s; 动画时长

animation-timing-function: linear; 速度曲线

animation-delay: 1s; 时间延迟

animation-iteration-count: infinite; 重复次数

animation-direction: alternate; 动画方向

animation-fill-mode: forwards; 动画执行完毕时的状态（使用时要 注释掉重复次数跟动画方向 不然会有冲突）

实现步骤：

1.定义动画

@keyframes 动画名称 {

0%{}

20%{}

100%{}

}

或者

@keyframes 动画名称{from{} to{} };

2.使用动画

animation: 动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态 ；

注意：1.动画名称和时长必须赋值。

2.取值不分先后顺序

3.如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

4.想要跟多个动画写完后加逗号隔开就好了

分步动画写法：

animation: 动画名称 2S steps(5);

运动曲线： linear //均匀 ，steps(5) //分步

动画次数：无限循环 infinite;

动画方向：alternate //来回循环

执行完毕状态：forwards //不返回原位，注意要设置这个属性的时候不能设置动画次数和动画方向

停止动画

animation-play-state: paused; //经过暂停的意思，配合hover使用