本章內容:
- 簡介
- 選擇器(Selector)
- 常用屬性
- 顏色屬性(color 、transparent、opacity)
- 字體屬性(font-style、 font-weight、font-size、 font-family、font)
- 文本屬性(white-space、direction、text-align、line-height、vertical-align、text-indent、letter-spacing、word-spacing、 text-transform、text-overflow、text-decoration、text-shadow、word-wrap)
- 背景屬性(background-color、background-image、background-position、background-repeat、background-attachment、background)
- 列表屬性(list-style-type、list-style-image、list-style-position、list-style)
- 頁面佈局
- 邊框(border-style、border-color、border-width、border-radius、border、box-shadow)
- 盒子模型(padding、margin)
- display
- visibility
- float 浮動
- clip 剪裁圖像
- overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容
- position 規定元素的定位類型(static、relative、absolute、fixed)
- z-index 元素層疊順序
- outline 邊框輪廓
- zoom 縮放比例
- cursor 鼠標的類型形狀(Crosshair、Pointer、Move、text、wait、help...)
- transform、transition 動畫效果
簡介 |
CSS 是什麼?
CSS是Cascading Style Sheets的簡稱,中文稱爲層疊樣式表。
屬性和屬性值用冒號隔開,以分號結尾。
CSS 四種引入方式:
1.行內式
行內式是在標籤的style屬性中設定CSS樣式。
1
|
< div style="..."></ div > |
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head>標籤的<style></style>標籤對中。
1
2
3
4
5
6
|
< head > ... < style type="text/css"> ...此處寫CSS樣式 </ style > </ head > |
3.導入式
將一個獨立的.css文件引入HTML文件中,導入式使用@import 引入外部CSS文件,<style>標記也是寫在<head>標記中。
導入式會在整個網頁裝載完後再裝載CSS文件。
1
2
3
4
5
6
|
< head > ... < style type="text/css"> @import
"My.css"; 此處注意.css文件的路徑 </ style > </ head > |
4.鏈接式
將一個獨立的.css文件引入到HTML文件中,使用<link>標記寫在<head>標記中。
鏈接式會以網頁文件主體裝載前裝載CSS文件。
1
2
3
4
|
< head > ... < link href="My.css"
rel="stylesheet" type="text/css"> </ head > |
樣式應用順序:
- 行內樣式優先級最高
- 針對相同的樣式屬性,不同的樣式屬性將以合併的方式呈現
- 相同樣式並且相同屬性,呈現方式在<head>中的順序決定,後面會覆蓋前面屬性
-
!important
指定樣式規則應用最優先
1
2
3
|
.nick
{ color:
yellow !important; } |
選擇器(Selector) |
基本選擇器:
1.通用元素選擇器
* 表示應用到所有的標籤。
1
|
*
{color: yellow} |
2.標籤選擇器
匹配所有使用 div 標籤的元素(可以匹配所有標籤)
1
|
div
{color: yellow} |
3.類選擇器
匹配所有class屬性中包含info的元素。
語法:.類名{樣式}(類名不能以數字開頭,類名要區分大小寫。)
1
2
|
.Mycolor
{color: yellow} < h3 class="Mycolor">nick</ h3 > |
4.ID選擇器
使用id屬性來調用樣式,在一個網頁中id的值都是唯一的(是W3C規範而不是規則,所以不會報錯)。
語法:#ID名{樣式}(ID名不能以數字開頭)
1
2
|
#Mycolor
{color: yellow} < h3 id="Mycolor">Nick.</ h3 > |
組合選擇器:
1.多元素選擇器
同時匹配h3,h4標籤,之間用逗號分隔。
1
2
3
|
h3,h4
{color: yellow;} < h3 >Nick</ h3 > < h4 >Jenny</ h4 > |
2.後代元素選擇器
匹配所有div標籤裏嵌套的P標籤,之間用空格分隔。
1
2
3
4
5
6
7
8
|
div
p {color: yellow;} < div > < p >Nick</ p > < div > < p >Nick</ p > </ div > </ div > |
3.子元素選擇器
匹配所有div標籤裏嵌套的子P標籤,之間用>分隔。
1
2
3
4
5
6
|
div
> p {color: yellow;} < div > < p >Nick</ p > < p >Nick</ p > </ div > |
4.毗鄰元素選擇器
匹配所有緊隨div標籤之後的同級標籤P,之間用+分隔(只能匹配一個)。
1
2
3
4
|
div
+ p {color: yellow;} < div >Nick</ div > < p >Nick</ p > |
屬性選擇器:
1.[title] & P[title]
設置所有具有title屬性的標籤元素;
設置所有具有title屬性的P標籤元素。
1
2
3
4
5
6
7
8
9
10
11
|
[title] { color:
yellow; } p[title] { color:
yellow; } < div title>Nick</ div > < p title>Nick</ p > |
2.[title=Nick]
設置所有title屬性等於“Nick”的標籤元素。
1
2
3
4
5
6
|
[title="Nick"] { color:
yellow; } < p title="Nick">Nick</ p > |
3.[title~=Nick]
設置所有title屬性具有多個空格分隔的值、其中一個值等於“Nick”的標籤元素。
1
2
3
4
5
6
7
|
[title~="Nick"] { color:
yellow; } < p title="Nick
Jenny">Nick</ p > < p title="Jenny
Nick">Nick</ p > |
4.[title|=Nick]
設置所有title屬性具有多個連字號分隔(hyphen-separated)的值、其中一個值以"Nick"開頭的標籤元素。
例:lang屬性:"en"、"en-us"、"en-gb"等等
1
2
3
4
5
6
|
[title|="Nick"] { color:
yellow; } < p title="Nick-Jenny">Nick</ p > |
5.[title^=Nick]
設置屬性值以指定值開頭的每個標籤元素。
1
2
3
4
5
6
|
[title^="Nick"] { color:
yellow; } < p title="NickJenny">Nick</ p > |
6.[title$=Nick]
設置屬性值以指定值結尾的每個標籤元素。
1
2
3
4
5
6
|
[title$="Nick"] { color:
yellow; } < p title="JennyNick">Nick</ p > |
7.[title*=Nick]
設置屬性值中包含指定值的每個元素
1
2
3
4
5
6
|
[title*="Nick"] { color:
yellow; } < p title="SNickJenny">Nick</ p > |
僞類選擇器:
1. link、hover、active、visited
- a:link(未訪問的鏈接狀態),用於定義了常規的鏈接狀態。
- a:hover(鼠標放在鏈接上的狀態),用於產生視覺效果。
- a:active(在鏈接上按下鼠標時的狀態)。
- a:visited(已訪問過的鏈接狀態),可以看出已經訪問過的鏈接。
1
2
3
4
5
6
|
a:link{color:
black} a:hover{color:
yellow} a:active{color:
blue} a:visited{color:
red} < a href="#">Nick</ a > |
2. before、after
- P:before 在每個<p>元素的內容之前插入內容;
- P:after 在每個<p>元素的內容之後插入內容。
1
2
3
4
5
6
7
8
9
10
11
|
p
{ color:
yellow; } p:before{ content:
"before..."; } p:after{ content:
"after..."; } < p >
Nick </ p > |
常用屬性 |
1. 顏色屬性:
color
- HEX(十六進制色:color: #FFFF00 --> 縮寫:#FF0)
- RGB(紅綠藍,使用方式:color:rgb(255,255,0)或者color:rgb(100%,100%,0%))
- RGBA(紅綠藍透明度,A是透明度在0~1之間取值。使用方式:color:rgba(255,255,0,0.5))
- HSL(CSS3有效,H表示色調,S表示飽和度,L表示亮度,使用方式:color:hsl(360,100%,50%))
- HSLA(和HSL相似,A表示Alpha透明度,取值0~1之間。)
transparent
- 全透明,使用方式:color: transparent;
opacity
- 元素的透明度,語法:opacity: 0.5;
- 屬性值在0.0到1.0範圍內,0表示透明,1表示不透明。
- filter濾鏡屬性(只適用於早期的IE瀏覽器,語法:filter:alpha(opacity:20);)。
2. 字體屬性:
font-style: 用於規定斜體文本
- normal 文本正常顯示
- italic 文本斜體顯示
- oblique 文本傾斜顯示
font-weight: 設置文本的粗細
- normal(默認)
- bold(加粗)
- bolder(相當於<strong>和<b>標籤)
- lighter (常規)
- 100 ~ 900 整百(400=normal,700=bold)
font-size: 設置字體的大小
- 默認值:medium
- <absolute-size>可選參數值:xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
- <relative-size>相對於父標籤中字體的尺寸進行調節。可選參數值:smaller、 larger
- <percentage>百分比指定文字大小。
- <length>用長度值指定文字大小,不允許負值。
font-family:字體名稱
- 使用逗號隔開多種字體(優先級從前向後,如果系統中沒有找到當前字體,則往後面尋找)
font:簡寫屬性
- 語法:font:字體大小/行高 字體;(字體要在最後)
3. 文本屬性:
white-space: 設置元素中空白的處理方式
- normal:默認處理方式。
- pre:保留空格,當文字超出邊界時不換行
- nowrap:不保留空格,強制在同一行內顯示所有文本,直到文本結束或者碰到br標籤
- pre-wrap:保留空格,當文字碰到邊界時換行
- pre-line:不保留空格,保留文字的換行,當文字碰到邊界時換行
direction: 規定文本的方向
- ltr 默認,文本方向從左到右。
- rtl 文本方向從右到左。
text-align: 文本的水平對齊方式
- left
- center
- right
line-height: 文本行高
- normal 默認
vertical-align: 文本所在行高的垂直對齊方式
- baseline 默認
- sub 垂直對齊文本的下標,和<sub>標籤一樣的效果
- super 垂直對齊文本的上標,和<sup>標籤一樣的效果
- top 對象的頂端與所在容器的頂端對齊
- text-top 對象的頂端與所在行文字頂端對齊
- middle 元素對象基於基線垂直對齊
- bottom 對象的底端與所在行的文字底部對齊
- text-bottom 對象的底端與所在行文字的底端對齊
text-indent: 文本縮進
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個單詞之間的空白
text-transform: 屬性控制文本的大小寫
- capitalize 文本中的每個單詞以大寫字母開頭。
- uppercase 定義僅有大寫字母。
- lowercase 定義僅有小寫字母。
text-overflow: 文本溢出樣式
- clip 修剪文本。
- ellipsis 顯示省略符號...來代表被修剪的文本。
- string 使用給定的字符串來代表被修剪的文本。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > <!--<link
href="cc2.css" rel="stylesheet" type="text/css">--> < style > div
{ width:
100px; height:
100px; white-space:
nowrap; overflow:
hidden; text-overflow:
ellipsis; } </ style > </ head > < body > < div >索寧
索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</ div > </ body > </ html > |
text-decoration: 文本的裝飾
- none 默認。
- underline 下劃線。
- overline 上劃線。
- line-through 中線。
text-shadow:文本陰影
- 第一個參數是左右位置
- 第二個參數是上下位置
- 第三個參數是虛化效果
- 第四個參數是顏色
- text-shadow: 5px 5px 5px #888;
word-wrap:自動換行
- word-wrap: break-word;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > p
{ width:
150px; height:
160px; background-color:
#FFA500; /*邊框陰影*/ box-shadow:
10px 10px 5px #888; /*自動換行*/ word-wrap:
break-word; } h1
{ text-shadow:
5px 5px 5px #888; } </ style > </ head > < body > < p > When
you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look </ p > < h1 >索寧</ h1 > </ body > </ html > |
a {
text-decoration: none;
/*去除a標籤下劃線*/
}
4. 背景屬性
background-color: 背景顏色
background-image 設置圖像爲背景
- url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 圖片地址
- background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果
background-position 設置背景圖像的位置座標
- background-position: center center; 圖片置中,x軸center,y軸center
- 1px -195px 截取圖片某部分,分別代表座標x,y軸
background-repeat 設置背景圖像不重複平鋪
- no-repeat 設置圖像不重複,常用
-
round 自動縮放直到適應並填充滿整個容器
- space 以相同的間距平鋪且填充滿整個容器
background-attachment 背景圖像是否固定或者隨着頁面的其餘部分滾動
background 簡寫
- background: url("o_ns.png") no-repeat 0 -196px;
-
background: url("o_ns.png") no-repeat center bottom 15px;
-
background: url("o_ns.png") no-repeat left 30px bottom 15px;
5. 列表屬性
list-style-type: 列表項標誌的類型
- none 去除標誌
- decimal-leading-zero; 02.
- square; 方框
- circle; 空心圓
- upper-alph; & disc; 實心圓
list-style-image:將圖象設置爲列表項標誌
list-style-position:列表項標誌的位置
- inside
- outside
list-style:縮寫
頁面佈局 |
1. 邊框
border-style:邊框樣式
- solid 默認,實線
- double 雙線
- dotted 點狀線條
- dashed 虛線
border-color:邊框顏色
border-width:邊框寬度
border-radius:圓角
- 1個參數:四個角都應用
- 2個參數:第一個參數應用於 左上、右下;第二個參數應用於 左下、右上
- 3個參數:第一個參數應用於 左上;第二個參數應用於 左下、右上;第三個參數應用於右下
- 4個參數:左上、右上、右下、左下(順時針)
border: 簡寫
- border: 2px yellow solid;
box-shadow:邊框陰影
- 第一個參數是左右位置
- 第二個參數是上下位置
- 第三個參數是虛化效果
- 第四個參數是顏色
- box-shadow: 10px 10px 5px #888;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > div
{ border:2px
solid; border-radius:25px; width:
140px; } </ style > </ head > < body > < div > 點贊哦!dear. </ div > </ body > </ html > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > .radius1
{ display:
inline-block; width:
100px; height:
100px; background-color:
yellow; border-radius:
20px; } .radius2
{ display:
inline-block; width:
100px; height:
100px; background-color:
red; border-radius:
20px 35px; } .radius3
{ display:
inline-block; width:
100px; height:
100px; background-color:
blue; border-radius:
20px 35px 50px; } .radius4
{ display:
inline-block; width:
100px; height:
100px; background-color:
green; border-radius:
20px 35px 50px 60px; } </ style > </ head > < body > < div > < span class="radius1"></ span > < span class="radius2"></ span > < span class="radius3"></ span > < span class="radius4"></ span > </ div > </ body > </ html > |
邊框實現各種三角符號:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > .triangle-one
{ display:
inline-block; border-top:
50px red solid; border-right:
50px green solid; border-bottom:
50px yellow solid; border-left:
50px blue solid; } .triangle-two
{ display:
inline-block; border-top:
0 red solid; border-right:
50px green solid; border-bottom:
50px yellow solid; border-left:
50px blue solid; } .triangle-stree
{ display:
inline-block; border-top:
50px red solid; border-right:
0 green solid; border-bottom:
50px yellow solid; border-left:
50px blue solid; } .triangle-four
{ display:
inline-block; border-top:
50px red solid; border-right:
0 green solid; border-bottom:
0 yellow solid; border-left:
50px blue solid; } .triangle-five
{ display:
inline-block; border:
50px transparent solid; border-top:
50px red solid; } .triangle-six
{ display:
inline-block; border:
50px transparent solid; border-bottom:
50px yellow solid; } .triangle-seven
{ display:
inline-block; border:
50px transparent solid; border-top:
60px red solid; border-right:
0; } .triangle-eight
{ display:
inline-block; border:
50px transparent solid; border-left:
30px yellow solid; border-bottom:
0; } </ style > </ head > < body > < div class="triangle-one"></ div > < div class="triangle-two"></ div > < div class="triangle-stree"></ div > < div class="triangle-four"></ div > < div class="triangle-five"></ div > < div class="triangle-six"></ div > < div class="triangle-seven"></ div > < div class="triangle-eight"></ div > </ body > </ html > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > .back
{ width:
1000px; height:
1000px; margin:
0 auto; background-color:
#ddd; position:
relative; } .back-in
{ position:
absolute; width:
1020px; height:
45px; left:
-20px; top:
50px; background-color:
#2F4F4F; } .back-img
{ border:
20px solid transparent; border-top:
10px solid dimgrey; border-right:
0; display:
inline-block; position:
absolute; top:
95px; left:
-20px; } .back-font
{ line-height:
9px; margin-left:
30px; color:
white; } </ style > </ head > < body > < div class="back"> < div class="back-in">< h3 class="back-font">妹子求關注
^.^</ h3 ></ div > < div class="back-img"></ div > </ div > </ body > </ html > |
2.★ 盒子模型
一個標準的盒子模型:
padding:用於控制內容與邊框之間的距離;
margin: 用於控制元素與元素之間的距離;
padding、margin | 表示上右下左都應用 |
padding-top、margin-top | 上 |
padding-right、margin-right | 右 |
padding-bottom、margin-bottom | 下 |
padding-left、margin-left | 左 |
一個參數,應用於四邊。
兩個參數,第一個用於上、下,第二個用於左、右。
三個參數,第一個用於上,第二個用於左、右,第三個用於下。
邊框在默認情況下會定位於瀏覽器窗口的左上角,但是並沒有緊貼着瀏覽器的窗口的邊框,這是因爲body本身也是一個盒子,外層還有html,
在默認情況下,body距離html會有若干像素的margin,所以body中的盒子不會緊貼瀏覽器窗口的邊框了。
解決方法:
body {
margin: 0;
}
3.★ display
- none 不顯示。
- block 顯示爲塊級元素。
- inline 顯示爲內聯元素。
- inline-block 行內塊元素(會保持塊元素的高寬)。
- list-item 顯示爲列表元素。
4. visibility
- visible 元素可見
- hidden 元素不可見
- collapse 當在表格元素中使用時,此值可刪除一行或一列,不會影響表格的佈局。
5.★ float 浮動
讓一行顯示兩個塊級標籤,會脫離文檔流
- none
- left 左浮動
- right 右浮動
clear 清除浮動:
- none : 默認值。允許兩邊都可以有浮動對象
- left : 不允許左邊有浮動對象
- right : 不允許右邊有浮動對象
- both : 不允許兩邊有浮動對象
6. clip 剪裁圖像
rect 剪裁定位元素:
- auto 默認值,無剪切
- 上-右-下-左(順時針)的順序提供四個偏移值
- 區域外的部分是透明的
- 必須指定 position:absolute;
例:clip:rect(0px,60px,200px,0px);
7. overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容
- visible 默認值,內容不會被修剪,會呈現在元素框之外。
- hidden 內容會被修剪,並且其餘內容是不可見的。
- scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便查看其餘的內容。
- auto 如果內容被修剪,則瀏覽器會顯示滾動條以便查看其餘的內容。
8.★ position 規定元素的定位類型
static |
默認值,沒有定位,遵從正常的文檔流 |
relative |
相對定位元素,相對於其正常位置進行定位,遵從正常的文檔流 |
absolute |
絕對定位元素,脫離正常文檔流 |
fixed | 絕對定位元素,固定在瀏覽器某處 |
-
通過以下四種屬性進行定位:
- left
- top
- right
- bottom
- z-index
9. z-index 元素層疊順序
- z-index 僅在定位元素上有效(例:position:absolute;)
- 可以指定負數屬性值(例:-1;)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > .z-index1
{ width:
100px; height:
100px; background-color:
yellow; position:
absolute; z-index:
-1; } .z-index2
{ width:
100px; height:
100px; background-color:
red; position:
absolute; top:
20px; left:
20px; z-index:
5; } </ style > </ head > < body > < div class="z-index1"></ div > < div class="z-index2"></ div > </ body > </ html > |
10. outline 邊框輪廓
- outline-width 輪廓寬度
- outline-color 輪廓顏色
- outline-style 輪廓樣式
11. zoom 縮放比例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<! DOCTYPE html> < html lang="en"> < head > < meta charset="UTF-8"> < title >Title</ title > < style > .zoom1
{ zoom:
100%; } .zoom2
{ zoom:
150%; } .zoom3
{ zoom:
200%; } </ style > </ head > < body > < div class="zoom1">Nick
100%</ div > < div class="zoom2">Nick
200%</ div > < div class="zoom3">Nick
300%</ div > </ body > </ html > |
12. cursor 鼠標的類型形狀
鼠標放在以下單詞上,There will be a miracle:
url: 自定義光標
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<link href="cc2.css" rel="stylesheet" type="text/css">--> <style> body { cursor: url("mouse.png"), auto; /*圖片地址:http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/ } </style> </head> <body> <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div> </body> </html>
Auto: 默認
Default: 默認
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help
13. transform、transition 動畫效果
transform 轉換,變形
- origin 定義旋轉基點(left top center right bottom 座標值) transform-origin: 50px 50px; transform-origin: left;。
- rotate 旋轉 transform:rotate(50deg) 旋轉角度可以爲負數,需要先定義origin。
- skew 扭曲 transform:skew(50deg,50deg) 分別爲相對x軸傾斜,相對y軸傾斜。
- scale 縮放 transform:scale(2,3) 橫向放大2倍,縱向放大3倍;transform:scale(2) 橫豎都放大2倍。
- translate 移動 transform:translate(50px, 50px) 分別爲相對x軸移動,相對y軸移動。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<! DOCTYPE html> < html > < head > < meta http-equiv="Content-Type"
content="text/html; charset=utf-8" /> < title >nick</ title > < meta charset="utf-8"
/> < style type="text/css"> div
{ border:
1px solid black; height:
30px; width:
30px; background-color:
yellow; /*transform-origin:
50px 50px;*/ transform-origin:
left; transform:
rotate(50deg); /*transform:
skew(50deg,50deg);*/ /*transform:
translate(50px,50px);*/ /*transform:
scale(2);*/ } </ style > </ head > < body > < div ></ div > </ body > </ html > |
Transition 平滑過渡
- transition-property: 變換的屬性(none(沒有屬性改變)、all(所有屬性改變)、具體屬性)
- transition-duration: 變換持續時間
- transition-timing-function: 變換的速率(ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然後減速)、cubic-bezier:(自定義時間曲線))
- transition-delay: 變換延遲時間
- transition: 縮寫
#property 指定屬性對應類型
1、color: 通過紅、綠、藍和透明度組件變換(每個數值單獨處理),如:background-color,border-color,color,outline-color等CSS屬性;
2、length:真實的數字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等屬性;
3、percentage:真實的數字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等屬性;
4、integer 離散步驟(整個數字),在真實的數字空間,以及使用floor()轉換爲整數時發生,如:outline-offset,z-index等屬性;
5、number真實的(浮點型)數值,如:zoom,opacity,font-weight等屬性;
6、transform list。
7、rectangle:通過x、 y、 width和height(轉爲數值)變換,如:crop;
8、visibility:離散步驟,在0到1數字範圍之內,0表示“隱藏”,1表示完全“顯示”,如:visibility;
9、shadow:作用於color、x、y、和blur(模糊)屬性,如:text-shadow;
10、gradient:通過每次停止時的位置和顏色進行變化。它們必須有相同的類型(放射狀的或是線性的)和相同的停止數值以便執行動畫,如:background-image;
11、paint server (SVG):只支持下面的情況:從gradient到gradient以及color到color,然後工作與上面類似;
12、space-separated list of above:如果列表有相同的項目數值,則列表每一項按照上面的規則進行變化,否則無變化;
13、a shorthand property:如果縮寫的所有部分都可以實現動畫,則會像所有單個屬性變化一樣變化。
#支持執行transition效果的屬性
Property Name Type
background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer
鼠標放在以下圖片上,There will be a miracle:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nick</title> <meta charset="utf-8" /> <style type="text/css"> .img-see-2016-7-2 { background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg"); background-size: 660px; background-repeat: no-repeat; height: 300px; width: 600px; transition-duration: 30s; transition-timing-function: ease; transition-property: background-size; } .img-see-2016-7-2:hover { background-size: 2000px; } </style> </head> <body> <div class="img-see-2016-7-2"></div> </body> </html>