css3

css3 新特性有哪些？

1. animation 动画

属性名	含义
animation-name	规定需要绑定选择器的keyframe名称
animation-duration	规定完成动画所花费的时间
animation-timing-function	动画的速度曲线。默认值ease
animation-deplay	动画开始之前的延迟
animation-timing-function	使用名为三次Cubic Bezier贝塞尔曲线函数的数学函数，来生成速度曲线
animation-iteration-count	动画播放的次数
animation-direction	是否应该轮流反向播放动画

2. transition 过渡

属性名	含义
transiont-property	属性规定过渡css属性的名称
transition-duration	完成过渡效果需要多少秒或毫秒
transition-timing-function	linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)
transition-delay

3. transform 旋转

旋转、缩放、移动或倾斜

属性名	含义
matrix(n,n,n,n,n,n)	使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	使用 16 个值的 4x4 矩阵
translate(x,y)	2D 转换
translate3d(x,y,z)	3D 转换
translateX(x)	只是用 X 轴的值
translateY(y)	只是用Y轴的值
translateZ(z)	只是用Z轴的值
scale(x,y)	2D缩放
scale3d(x,y,z)	3D缩放
scaleX(x),scaleY(y),scaleZ(z)
rotate(angle)	2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)	3D 旋转
rotateX(angle),rotateY(angle),rotateZ(angle)
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle) skewY(angle) perspective(n)

4.新增css3选择器

E:nth-last-child(n) 
E:nth-of-type(n) 
E:nth-last-of-type(n) 
E:last-child 
E:first-of-type 
E:only-child 
E:only-of-type 
E:empty 
E:checked 
E:enabled 
E:disabled 
E::selection 
E:not(s)
E::not(.s)
body: nth-child(even), nth-child(odd)

5.新增@font-face特性

font-face可以加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体

6.word-wrap

文字换行，省略号的应用

7. gradient 渐变效果

线性渐变 linear左上（0% 0%）到右上(0% 100%)

background-image:-webkit-gradient(linear,0% 0%,100% 0%,form(red),to(balck))
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

径向渐变radial从一个圆到一个圆的渐变

background:-weblit-gradient(radial,50 50,50,50 50,0,form(black),color-stop(0.5,red),to(blue));

8.阴影shoadow和反射reflect

9.属性选择器

E[att^="val"]选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"]选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]选择具有att属性且属性值为包含val的字符串的E元素

10.单位

vh