CSS新增2

Web字体

通过@font-face指定字体具体地址，浏览器会自动下载该字体，不依赖用户电脑上的字体了。

@font-face{

font-family:"";

src:url();

}

可使用阿里web字体定制工具：https://www.iconfont.cn/webfont

字体图标

相比图片更清晰；灵活性高，更方便改变大小、颜色、风格等；兼容性好，IE也支持

阿里图标官网地址：https://www.iconfont.cn

2D变换

2D位移

2D位移可以改变元素的位置，先给元素添加转换属性，编写transform具体值

translateX 设置水平方向位移

translateY 设置垂直方向位移

translate 设置水平和垂直方向位移，一个值代表水平方向

注意：

位移和相对定位相似，都不脱离文档流，不会影响到其他元素

相对定位的百分比参考其父元素，定位值百分比参考自身

浏览器对位移有优化，处理效率更高；

transform可以链式编写,transform:translateX(30px) translateY(40px);位移对行内元素无效；

位移配合定位，可实现元素水平垂直居中

2D缩放

先给元素添加转换属性tranform，编写transform具体值

scaleX 水平方向的缩放比例

scaleY垂直方向的缩放比例

scale 同时设置水平、垂直方向的比例

可以实现小于12px的文字

 2D旋转 

transform:rotateZ(20deg)或transform:rotate(20deg)顺时针，若为-20deg，逆时针

2D多重变换

transform:translate(-50%,-50%) rotate(45deg);

2D变换原点

 transform-origin：关键词/像素点/百分比

对旋转、缩放有影响，对位移没有影响（一直是左上角）

3D变换

元素进行3D变换的首要操作：父元素开启3D空间

transfor-style:flat(默认2D空间)/preserve-3d(3d空间)

设置景深（指定观察者与z=0平面的而距离）同样设置给父元素

perspective:none(不透视 默认值)/长度值（不允许负值）

透视点位置（观察者位置，默认的透视点在元素的中心）

perspective-origin:400px 300px;

3D位移

在2D位移基础上，可以让元素沿z轴位移，使用方式如下：

transform: translateZ(150px); 只能是像素值，不能是百分比

transform: translate3d(50%,50%,100px);

3D旋转

在2D旋转的基础上，可以让元素沿x轴和y轴旋转

transform: rotateX(deg)，设置x轴旋转角度，正值顺时针，负值逆时针

transform: rotateY(deg)，设置y轴旋转角度，正值顺时针，负值逆时针

transform: rotate3d（x,y,z,deg） xyz取值0，1，表示xyz轴是否旋转

3D缩放

transform:scaleZ() 设置z轴方向的缩放比例，实际调的景深

transform:scale3d(x,y,z)参数不允许省略

3D多重变换

transform: translateZ(100px) scaleZ(1) rotateY(45deg) 建议旋转最后

过渡

让元素从一种样式，平滑过渡为另一种样式

transition-property定义哪个属性需要过渡，只有在该属性中定义的属性才有过渡效果

transition-property: none(不过渡任何属性)/all(过渡所有能过渡的属性)/具体某个属性名

可以过渡的属性：颜色、长度值、百分比、z-index、opacity、2D变换属性、3D变换属性

阴影

transition-duration 设置过渡持续的时间

transition-delay 指定开始过渡的延迟时间，单位：s或ms

transition-timing-function 设置过渡的类型

ease平滑过渡

linear线性过渡

ease-in 慢-快

ease-out 快-慢

ease-in-out 慢-快-慢

step-start 等同于 steps(1,start)

step-end 等同于 steps(1,end)

step(intger,?)第一个参数为正整数，指定函数的步数。第二个参数可以是start或end，指定每一步值发生变化的时间点，第二个参数默认值为end

cubic-bezie 特定类型的贝塞尔曲线

transition：1s 1s linear all;一个时间表示duration，两个时间，第一个是duration，第二个是delay

 动画

定义一组关键帧方式：

//第一种 简单

@keyframes 动画名{

from{//第一帧

属性名：属性值；

}

to{//最后一帧

属性名：属性值；

}

}

//第二种 

@keyframes 动画名{

0%{//第一帧

属性名：属性值；

}

n%{//第n帧

属性名：属性值；

}

100%{//最后一帧

属性名：属性值；

}

}

为谁制作动画 在谁的css里写animation-name，并设置动画所需的时间annimation-duration

animation-iteration-count，指定动画播放次数，可选值number和infinite（无限循环）

animation-direction，指定动画方向，normal正常方向，reverse反方向，alternate先正常方向再反方向，并持续，alternate-reverse，先反运行再正方向运行

animation-fill-mode，设置动画之外的状态，forwards对象状态为动画结束时的状态，backwards对象状态为动画开始时的状态。

animation-play-state，设置动画的播放状态，running运动，paused暂停

多列布局