一、文本效果
二、字体描述
描述符 |
值 |
描述 |
font-family |
name |
必需。规定字体的名称。 |
src |
URL |
必需。定义字体文件的 URL。 |
font-stretch |
- normal
- condensed
- ultra-condensed
- extra-condensed
- semi-condensed
- expanded
- semi-expanded
- extra-expanded
- ultra-expanded
|
可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
font-weight |
- normal
- bold
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
|
可选。定义字体的粗细。默认是 "normal"。 |
unicode-range |
unicode-range |
可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
三、2D 转换方法
函数 |
描述 |
matrix(n,n,n,n,n,n) |
定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) |
定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) |
定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) |
定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) |
定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) |
定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) |
定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) |
定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) |
定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) |
定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) |
定义 2D 倾斜转换,沿着 Y 轴。 |
四、3D 转换
转换属性:
转换方法:
函数 |
描述 |
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) |
定义 3D 转化。 |
translateX(x) |
定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) |
定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) |
定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) |
定义 3D 缩放转换。 |
scaleX(x) |
定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) |
定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) |
定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) |
定义 3D 旋转。 |
rotateX(angle) |
定义沿 X 轴的 3D 旋转。 |
rotateY(angle) |
定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) |
定义沿 Z 轴的 3D 旋转。 |
perspective(n) |
定义 3D 转换元素的透视视图。 |
五、动画
动画实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-动画</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>