CSS3字体样式及高级特效

CSS3字体

体现在内部样式<style></style>

@font-face {

        font-family: 必需。规定字体的名称

        src: 必需。定义字体文件所在路径

        font-weight: 可选。定义字体的粗细。默认是 "normal"

        font-style: 可选。定义字体的样式。默认是 "normal"}

如:

@font-face{

font-family: myfont;

src: url(./)   

   font-weight: normal;

   font-style: normal;}

CSS3高级特效

CSS3变形

CSS3变形是一些效果的集合

设置变形函数，可以是一个，也可以是多个，中间以空格分开

transform:[transform-function] ;

变形函数

2D位移

translate()：平移函数，基于X、Y坐标重新定位元素的位置

如果只有一个值的话，其他坐标默认不变translate(1px)

transform:translate(tx,ty)=transform:translateX()空格translateY()

translateX（tx） 只设置X轴的位移

transform:translate(100px,0) =transform:translateX(100px)

translateY（ty）只设置Y轴的位移

transform:translate(0,100px)=transform:translateY(100px)

2D缩放

scale(sx,sy):缩放函数，可以使任意元素对象尺寸发生变化

注：scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等

scaleX(sx)：设置X轴[横向坐标（宽度）]方向的缩放

transform:scale(2,1) ==transform:scaleX(2) 

scaleY(sy):设置Y轴的缩放[纵轴坐标（高度）]方向的缩放量

transform:scale(1,2)==transform:scaleY(2)

1表示原样式没有变化

2D倾斜

skew(ax, ay);

单位使用deg表示

ax 水平方向（X轴）的倾斜角度,延Y轴左右倾斜

ay 垂直方向（Y轴）的倾斜角度,延X轴上下倾斜

transform:skew(ax, ay)=transform:skewax()  skeway()

如果只有一个值的话，其他坐标默认不变translate(1px)

2D旋转

rotate(a)

单位使用deg表示

参数a取正值时元素相对原来中心点顺时针旋转