Skip to content

Commit 515e5bb

Browse files
waylauwaylau
committed
update
Signed-off-by: waylau <[email protected]>
1 parent a88ad24 commit 515e5bb

8 files changed

+502
-133
lines changed

‎docs/Animation.md

+159
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
动画
2+
====
3+
4+
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash 动画，和 Javascripts。
5+
6+
## CSS3 @keyframes 规则
7+
要创建CSS3动画，你将不得不了解`@keyframes`规则。
8+
9+
`@keyframes`规则是用来创建动画。 `@keyframes`规则内指定一个 CSS样式和动画将逐步从目前的样式更改为新的样式。
10+
11+
**注意：**Internet Explorer 10、Firefox 以及 Opera 支持 `@keyframes` 规则和 animation 属性。
12+
Chrome 和 Safari 需要前缀 -webkit-。
13+
14+
## CSS3 动画
15+
当在`@keyframe`创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
16+
17+
指定至少这两个 CSS3 的动画属性绑定向一个选择器：
18+
19+
* 规定动画的名称
20+
* 规定动画的时长
21+
22+
例子：
23+
24+
#animated_div {
25+
animation: animated_div 5s infinite;
26+
-moz-animation: animated_div 5s infinite;
27+
-webkit-animation: animated_div 5s infinite;
28+
}
29+
30+
## CSS3动画是什么？
31+
32+
* 动画是使元素从一种样式逐渐变化为另一种样式的效果。
33+
* 您可以改变任意多的样式任意多的次数。
34+
* 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
35+
* 0% 是动画的开始，100% 是动画的完成。
36+
* 为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
37+
38+
39+
@keyframes animated_div {
40+
0% {
41+
left: 0px;
42+
}
43+
20% {
44+
left: 50px;
45+
background-color: green;
46+
}
47+
40% {
48+
left: 140px;
49+
background-color: red;
50+
}
51+
60% {
52+
left: 280px;
53+
background-color: yellow;
54+
}
55+
80% {
56+
left: 425px;
57+
background-color: blue;
58+
}
59+
100% {
60+
left: 0px;
61+
background-color: pink;
62+
}
63+
}
64+
65+
## 常用属性
66+
67+
<table class="reference"> <tbody><tr> <th style="width:30%;">属性</th> <th>描述</th> <th style="width:5%;">CSS</th> </tr> <tr> <td><a href="/cssref/css3-pr-animation-keyframes.html" title="CSS3 @keyframes 规则">@keyframes</a></td> <td>规定动画。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/css3-pr-animation.html" title="CSS3 animation 属性">animation</a></td> <td>所有动画属性的简写属性，除了 animation-play-state 属性。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/css3-pr-animation-name.html" title="CSS3 animation-name 属性">animation-name</a></td> <td>规定 @keyframes 动画的名称。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/css3-pr-animation-duration.html" title="CSS3 animation-duration 属性">animation-duration</a></td> <td>规定动画完成一个周期所花费的秒或毫秒。默认是 0。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/css3-pr-animation-timing-function.html" title="CSS3 animation-timing-function 属性">animation-timing-function</a></td> <td>规定动画的速度曲线。默认是 "ease"。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/css3-pr-animation-delay.html" title="CSS3 animation-delay 属性">animation-delay</a></td> <td>规定动画何时开始。默认是 0。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/css3-pr-animation-iteration-count.html" title="CSS3 animation-iteration-count 属性">animation-iteration-count</a></td> <td>规定动画被播放的次数。默认是 1。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/css3-pr-animation-direction.html" title="CSS3 animation-direction 属性">animation-direction</a></td> <td>规定动画是否在下一周期逆向地播放。默认是 "normal"。</td> <td>3</td> </tr> <tr> <td><a href="/cssref/css3-pr-animation-play-state.html" title="CSS3 animation-play-state 属性">animation-play-state</a></td> <td>规定动画是否正在运行或暂停。默认是 "running"。</td> <td>3</td> </tr> </tbody></table>
68+
69+
## 例子
70+
71+
<style>
72+
div {
73+
width: 100px;
74+
height: 100px;
75+
background: red;
76+
position: relative;
77+
animation-name: myfirst;
78+
animation-duration: 5s;
79+
animation-timing-function: linear;
80+
animation-delay: 2s;
81+
animation-iteration-count: infinite;
82+
animation-direction: alternate;
83+
animation-play-state: running;
84+
/* Safari and Chrome: */
85+
-webkit-animation-name: myfirst;
86+
-webkit-animation-duration: 5s;
87+
-webkit-animation-timing-function: linear;
88+
-webkit-animation-delay: 2s;
89+
-webkit-animation-iteration-count: infinite;
90+
-webkit-animation-direction: alternate;
91+
-webkit-animation-play-state: running;
92+
}
93+
94+
@keyframes myfirst {
95+
0% {
96+
background: red;
97+
left: 0px;
98+
top: 0px;
99+
}
100+
25% {
101+
background: yellow;
102+
left: 200px;
103+
top: 0px;
104+
}
105+
50% {
106+
background: blue;
107+
left: 200px;
108+
top: 200px;
109+
}
110+
75% {
111+
background: green;
112+
left: 0px;
113+
top: 200px;
114+
}
115+
100% {
116+
background: red;
117+
left: 0px;
118+
top: 0px;
119+
}
120+
}
121+
122+
@-webkit-keyframes myfirst /* Safari and Chrome */
123+
{
124+
0% {
125+
background: red;
126+
left: 0px;
127+
top: 0px;
128+
}
129+
25% {
130+
background: yellow;
131+
left: 200px;
132+
top: 0px;
133+
}
134+
50% {
135+
background: blue;
136+
left: 200px;
137+
top: 200px;
138+
}
139+
75% {
140+
background: green;
141+
left: 0px;
142+
top: 200px;
143+
}
144+
100% {
145+
background: red;
146+
left: 0px;
147+
top: 0px;
148+
}
149+
}
150+
</style>
151+
<div>
152+
CSS3
153+
<span style="font-size:10px;">Tutorial</span>
154+
</div>
155+
156+
## 源码
157+
158+
本文中所用例子源码参见
159+
<https://github.com/waylau/css3-tutorial> 中 `samples` 目录下的 animation.html、animation_2.html

‎docs/Introduction.md

+85-13
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,35 @@
44
## 什么是CSS
55
CSS 是 Cascading Style Sheet（层叠样式表）的缩写。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
66

7-
CSS2.1 是目前被使用最广泛的版本，而目前还在开发中的 CSS3 具有更吸引人的特性。
7+
### 历史
8+
* CSS 最早被提议是在1994年；
9+
* 最早被浏览器支持是1996年；
10+
* 1996年 W3C 正式推出了CSS1；
11+
* 1998年 W3C 正式推出了CSS2；
12+
* CSS2.1 是 W3C 现在正在推荐使用的；
13+
* CSS3 现在还处于开发中；
14+
* CSS 3 在包含了所有 CSS 2 所支持的基础上更有所改进，所以不必担心兼容问题。
815

9-
CSS3 已完全向后兼容，所以你就不必改变现有的设计。
16+
CSS 支持多种设备，例如手机、电视、打印机、幻灯片等。但是 CSS 在浏览器上得到了更好的推广。
1017

1118
## 语法
1219

1320
selector {property: value;}
1421

1522
![](../images/selector.jpg)
1623

17-
## 用法
18-
19-
### 引入方式
24+
## 引入方式
2025

2126
三种方式将样式表加入您的网页：
2227

23-
#### 内联方式 Inline Styles
28+
### 内联方式 Inline Styles
2429

2530
内联定义即是在对象的标记内使用对象的 style 属性定义适用其的样式表属性。
2631
示例代码：
2732

2833
<p style="color:#f00">这一行的字体颜色将显示为红色</p>
2934

30-
#### 内部样式块对象 Embedding a Style Block
35+
### 内部样式块对象 Embedding a Style Block
3136

3237
你可以在你的 HTML 文档的`<head>`标记里插入一个`<style>`块对象。
3338
示例代码：
@@ -38,7 +43,7 @@ selector {property: value;}
3843
}
3944
</style>
4045

41-
#### 外部样式表 Linking to a Style Sheet
46+
### 外部样式表 Linking to a Style Sheet
4247

4348
你可以先建立外部样式表文件`*.css`，然后使用 HTML 的 link 对象。或者使用 `@import` 来引入。
4449
示例代码：
@@ -53,13 +58,73 @@ selector {property: value;}
5358

5459
**注意**：在实际开发中，推荐使用 HTML 的 link 对象来引入。详细内容可以参见<http://www.waylau.com/css-code-guide/#css-miscellaneous>
5560

56-
### 优先级
61+
## 选择器权重
62+
63+
![](../images/priority_rules.jpg)
5764

58-
而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅!important声明。
65+
权重主要分为 4 个等级：
5966

60-
####!important
67+
* 第一等：代表内联样式，如: `style=""`，权值为1000
68+
* 第二等：代表ID选择器，如：`#content`，权值为100
69+
* 第三等：代表类，伪类和属性选择器，如`.content`，权值为10
70+
* 第四等：代表类型选择器和伪元素选择器，如`div p`，权值为1
6171

62-
!important 作用是提高指定 CSS 样式规则的应用优先权。
72+
例子如下
73+
74+
<!DOCTYPE html>
75+
<html>
76+
<head>
77+
<meta charset="utf-8">
78+
<title>选择器权重 | www.waylau.com</title>
79+
<meta name="description" content="选择器权重">
80+
<meta name="author" content="Way Lau, www.waylau.com"/>
81+
<meta name="viewport" content="width=device-width">
82+
<link rel="shortcut icon" href="/favicon.ico">
83+
84+
<style type="text/css">
85+
#redP p {
86+
/* 权值 = 100+1=101 */
87+
color: #F00; /* 红色 */
88+
}
89+
90+
#redP .red em {
91+
/* 权值 = 100+10+1=111 */
92+
color: #00F; /* 蓝色 */
93+
94+
}
95+
96+
#redP p span em {
97+
/* 权值 = 100+1+1+1=103 */
98+
color: #FF0; /*黄色*/
99+
}
100+
</style>
101+
</head>
102+
<body>
103+
<div id="redP">
104+
<p class="red">red
105+
<span><em>em red</em></span>
106+
</p>
107+
108+
<p>red</p>
109+
</div>
110+
</body>
111+
</html>
112+
113+
最终页面效果如下：
114+
115+
![](../images/priority_rules_2.jpg)
116+
117+
## 优先级
118+
119+
遵循如下法则：
120+
121+
* 选择器都有一个权值，权值越大越优先；
122+
* 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
123+
* 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
124+
* 继承的 CSS 样式不如后来指定的 CSS 样式；
125+
* 在同一组属性设置中标有`!important`规则的优先级最大
126+
127+
例子如下：
63128

64129
<!DOCTYPE html>
65130
<html>
@@ -104,4 +169,11 @@ selector {property: value;}
104169

105170
![](../images/important.jpg)
106171

107-
详细的可以参见 [CSS 的优先级机制[总结]](http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html)
172+
## 源码
173+
174+
本文中所用例子源码参见
175+
<https://github.com/waylau/css3-tutorial> 中 `samples` 目录下的 important.html、priority_rules.html
176+
177+
## 参考
178+
* <http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php>
179+
* <http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html>

‎images/priority_rules.jpg

31 KB
Loading

‎images/priority_rules_2.jpg

8.83 KB
Loading

0 commit comments

Comments
 (0)