1. Text effect
| Attributes |
describe |
CSS |
| hanging-punctuation |
Specifies whether punctuation characters are outside the wireframe. |
3 |
| punctuation-trim |
Specifies whether punctuation characters are trimmed. |
3 |
| text-align-last |
Set how to align the last line or the line immediately before the forced line break. |
3 |
| text-emphasis |
Applies the emphasis mark and the focus mark's foreground color to the element's text. |
3 |
| text-justify |
Specifies the justification method to use when text-align is set to "justify". |
3 |
| text-outline |
Specifies the outline of the text. |
3 |
| text-overflow |
Specifies what happens when text overflows the containing element. |
3 |
| text-shadow |
Adds a shadow to text. |
3 |
| text-wrap |
Specifies the line break rules for text. |
3 |
| word-break |
Specifies line break rules for non-CJK text. |
3 |
| word-wrap |
Allow long undivided words to be split and wrap to the next line. |
3 |
2. Font description
| Descriptor |
value |
describe |
| font-family |
name |
required. Specifies the name of the font. |
| src |
URL |
required. Defines the URL of the font file. |
| font-stretch |
- normal
- condensed
- ultra-condensed
- extra-condensed
- semi-condensed
- expanded
- semi-expanded
- extra-expanded
- ultra-expanded
|
optional. Defines how to stretch the font. The default is "normal". |
| font-style |
|
optional. Defines the style of the font. The default is "normal". |
| font-weight |
- normal
- bold
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
|
optional. Defines the weight of the font. The default is "normal". |
| unicode-range |
unicode-range |
optional. Defines the range of UNICODE characters supported by the font. The default is "U+0-10FFFF". |
3. 2D conversion method
| function |
describe |
| 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) |
Defines the perspective view of the 3D transformed element. |
5. Animation
| Attributes |
describe |
CSS |
| @keyframes |
Specifies the animation. |
3 |
| animation |
Shorthand property for all animation properties. |
3 |
| animation-name |
Specifies the name of the @keyframes animation. |
3 |
| animation-duration |
Specifies the seconds or milliseconds it takes for the animation to complete a cycle. The default is 0. |
3 |
| animation-timing-function |
Specifies the speed curve for the animation. The default is "ease". |
3 |
| animation-fill-mode |
Specifies the style to be applied to the element when the animation is not playing (when the animation is complete, or when there is a delay before the animation starts). |
3 |
| animation-delay |
Specifies when the animation starts. The default is 0. |
3 |
| animation-iteration-count |
Specifies the number of times the animation is played. The default is 1. |
3 |
| animation-direction |
Specifies whether the animation plays backwards on the next cycle. The default is "normal". |
3 |
| animation-play-state |
Specifies whether the animation is running or paused. The default is "running". |
3 |
Animation example:
<!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>