HTML5移動開發學習筆記之CSS3基礎學習

時間 2019-12-13

標籤 html5 html 移動開發學習筆記 css3 css 基礎欄目 HTML5 简体版

原文原文鏈接

CSS回顧css

在學CSS3以前首先鞏固下CSS的基礎知識。html

1.CSS框模型web

舉例子：瀏覽器

#box { width: 70px; margin: 10px; padding: 5px; }服務器

這個代碼將出現的效果是：ide

2.CSS定位與浮動函數

1）定位：佈局

屬性	描述
position	把元素放到一個靜態的(static：元素框正常生成)，相對的(relative：元素框偏移某個距離[相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置])，絕對的(absolute：元素框從文檔流徹底刪除，並相對於其包含塊定位)，或固定(fixed：元素框的表現相似於absolute,不過其包含塊的視窗自己)的位置中
top,right,bottom,left	定義一個元素的上，右，下，左外邊距邊界與其包含塊上，右，下，左邊界之間的距離。注：若是position的屬性值爲"static"，則不會有任何效果。
overflow	設置當元素內容溢出其區域發生的事。overflow: scroll(顯示滾動條)\|hidden（隱藏）\|auto（瀏覽器自動處理）
clip	設置元素的形狀，元素被剪入這個形狀之中 rect (top, right, bottom, left)
vertical-align	設置元素的垂直對齊方式。如：`vertical-align:text-top;把元素的頂端與父元素字體的頂端對齊`
z-index	設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面(1>0>-1) 注：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

看下對這些知識點的練習：學習

效果：測試

代碼：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>無標題文檔</title>
 6 <style type="text/css">
 7 h2.pos_left
 8 {
 9 position:relative;
10 left:-20px;
11 top:-20px;
12 }
13 h2.pos_right
14 {
15 position:relative;
16 left:20px;
17 top:20px;
18 }
19 h2.pos_absleft
20 {
21 position:absolute;
22 left:280px;
23 top:30px;
24 color:red
25 }
26 h2.pos_absright
27 {
28 position:absolute;
29 left:-10px;
30 top:90px;
31 color:red
32 }
33 h2.one
34 {
35 position:fixed;
36 left:15px;
37 top:235px;
38 }
39 h2.two
40 {
41 position:fixed;
42 top:30px;
43 right:15px;
44 }
45 #over 
46 {
47 background-color:#00FFFF;
48 width:150px;
49 height:150px;
50 overflow: auto
51 }
52 </style>
53 </head>
54 
55 <body>
56 <p>1.絕對定位和相對定位的區別：
57 </p>
58 <h2>這是正常位置</h2>
59 <h2 class="pos_left">相對定位1</h2>
60 <h2 class="pos_right">相對定位2</h2>
61 <h2 class="pos_absleft">絕對定位的移動1</h2>
62 <h2 class="pos_absright">絕對定位的移動2</h2>
63 </body>
64 <hr />
65 <p>2.固定定位：
66 </p>
67 <h2 class="one">固定定位測試1。</h2>
68 <h2 class="two">固定定位測試2。</h2>
69 <p>&nbsp;</p>
70 <hr />
71 <p>3.overflow的使用：overflow: scroll(顯示滾動條)|hidden（隱藏）|auto（瀏覽器自動處理）
72 </p>
73 <div id="over">
74 這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。默認值是 visible。
75 </div>
76 </html>

View Code

2）浮動：

W3School上講解的浮動較簡單，不過也有些不太好理解。借鑑http://www.jb51.net/css/67471.html 這篇文章，對浮動有了點理解。

浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。
正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其餘普通流元素了，也就表現出高度爲0（高度塌陷）。在實際佈局中，每每這並非咱們所但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。

咱們先來看下高度塌陷的現象：

代碼爲：

<style type="text/css">
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

</style>
</head>
<body>
<p>①由於浮動表現出高度爲0（高度塌陷）的現象：
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>這是文本</p>
<p>這是文本</p>
<p>這是文本</p>
</div>
</body>

而後看下清理浮動的方法：

①添加額外標籤的效果：

代碼：

<style type="text/css">
.clear {
  clear: both;
  }
</style>
</head>
<body>
<p>①添加額外標籤消除高度塌陷的現象：
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>這是文本</p>
<p>這是文本</p>
<p>這是文本</p>
<div class="clear"></div>
</div>
</body>

②使用 br標籤和其自身的 html屬性 (這個方法有些小衆，br 有 clear=「all | left | right | none」屬性) 【效果如上述方法同樣，親測經過】

代碼：

<body>
<p>②使用br標籤和其自身的 html屬性消除高度塌陷的現象：
</p>
<div class="news" width="50px">
<img src="XiaoKeAi.jpg" />
<p>這是文本</p>
<p>這是文本</p>
<p>這是文本</p>
<br clear="all" /> 
</div>
</body>

③父元素設置 overflow：hidden

經過設置父元素overflow值設置爲hidden；在IE6中還須要觸發 hasLayout ，例如 zoom：1(試了下，這裏能夠不須要的)；【效果如上述方法同樣，親測經過】

代碼：

<body>
<p>③父元素設置 overflow：hidden 消除高度塌陷的現象：
</p>
<div class="news" width="50px" style="overflow:hidden;*zoom:1;" >
<img src="XiaoKeAi.jpg" />
<p>這是文本</p>
<p>這是文本</p>
<p>這是文本</p>
</div>
</body>

④父元素設置 overflow：auto 屬性

將上述的style="overflow:hidden;" 這行代碼改成style="overflow:auto;"

⑤父元素也設置浮動

效果有點不同：

代碼只在這裏變更了：

.news {
  background-color: gray;
  border: solid 1px black;
    float: left;
  }

⑥父元素設置display:table
效果跟上述⑤是同樣同樣滴~~

代碼只在這裏變更了：

.news {
  background-color: gray;
  border: solid 1px black;
  display:table;
  }

⑦使用:after僞元素【注：after是僞元素，不是僞類】（據說這種方法是最好滴~~）

效果跟方法①是同樣的~

增長了這個代碼：

.news:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

3.CSS選擇器

元素選擇器，選擇器分組，類選擇器，ID選擇器，屬性選擇器，後代選擇器，子元素選擇器，相鄰兄弟選擇器這些知識點已經在W3School回顧溫習了下，不記錄了。主要學習下CSS 僞類，CSS僞元素。

1）CSS僞類

①錨僞類

 {color: #FF0000}		/* 未訪問的連接 */
 {color: #00FF00}	/* 已訪問的連接 */
 {color: #FF00FF}	/* 鼠標移動到連接上 */
 {color: #0000FF}	/* 選定的連接 */a:linka:visiteda:hovera:active

注：a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的；a:active 必須被置於 a:hover 以後，纔是有效的。僞類名稱對大小寫不敏感。

②:focus僞類

向擁有鍵盤輸入焦點的元素添加樣式。

③:first-child僞類

:first-child 僞類來選擇元素的第一個子元素，特定僞類很容易遭到誤解，最多見的錯誤是認爲 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素（我就是這樣錯誤的認爲( ╯□╰ )）實際上倒是選擇器匹配做爲任何元素的第一個子元素的 p 元素。

④:lang僞類

:lang 僞類使你有能力爲不一樣的語言定義特殊的規則。

綜合練習下：效果以下

代碼：

 1 <html>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <head>
 4 <style type="text/css">
 5 a:link {color: #FF0000}
 6 a:visited {color: #00FF00}
 7 a:hover {color: #FF00FF}
 8 a:active {color: #0000FF}
 9 input:focus
10 {
11 background-color:yellow;
12 }
13 p > i:first-child {
14   font-weight:bold;
15   }
16   q:lang(no)
17    {
18    quotes: "~" "~"
19    }
20 </style>
21 </head>
22 
23 <body>
24 <p>1.錨僞類的應用：<br />
25 <b><a href="/index.html" target="_blank">這是一個連接。</a></b>
26 </p>
27 <p>2.focus僞類的應用：<br />
28 First name: <input type="text" name="fname" />
29 </p>
30 <p>3.first-child僞類的應用：<br />
31 <p>some <i>text</i>. some <i>text</i>.</p>
32 <p>some <i>text</i>. some <i>text</i>.</p>
33 </p>
34 <p>4. lang 僞類的應用：<br />
35 <p>文字<q lang="no">段落中的引用的文字</q>文字</p>
36 </p>
37 </body>
38 </html>

View Code

2）CSS僞元素

①:first-line 僞元素

"first-line" 僞元素用於向文本的首行設置特殊樣式。"first-line" 僞元素只能用於塊級元素。

②:first-letter 僞元素

"first-letter" 僞元素用於向文本的首字母設置特殊樣式。

③:before 僞元素

":before" 僞元素能夠在元素的內容前面插入新內容。

④:after 僞元素

":after" 僞元素能夠在元素的內容以後插入新內容。

綜合練習下：效果以下

代碼：

 1 <html>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <head>
 4 <style type="text/css">
 5 p:first-line 
 6 {
 7 color: #ff0000;
 8 font-variant: small-caps
 9 }
10 h5:first-letter 
11 {
12 color: #ff0000;
13 font-size:xx-large
14 }
15 h3:before
16 {
17 content:"臺詞：";
18 }
19 h4:after
20 {
21 content:"- 臺詞";
22 }
23 </style>
24 </head>
25 
26 <body>
27 1.first-line 僞元素的應用：<br />
28 <p>
29 You can use the :first-line pseudo-element to add a special effect to the first line of a text!
30 </p>
31 2.first-letter 僞元素的應用：<br />
32 <h5>
33 You can use the :first-line pseudo-element to add a special effect to the first line of a text!
34 </h5>
35 3.:before 僞元素的應用：<br />
36 <h3>我是唐老鴨。</h3>
37 <h3>我住在 Duckburg。</h3>
38 
39 4.:after僞元素的應用：<br />
40 <h4>我是唐老鴨。</h4>
41 <h4>我住在 Duckburg。</h4>
42 </body>
43 </html>

View Code

小結下：僞類和僞元素有什麼區別呢？作的時候就在想。。。又發現好文章一枚 http://m.blog.csdn.net/blog/zhuizhuziwo/7897837

【僞類：做用對象是整個元素；僞元素：做用於元素的一部分】

CSS3學習

CSS3徹底向後兼容，所以沒必要改變現有的設計。CSS3被劃分爲模塊，最重要的CSS3模塊包括：

1）選擇器；2）框模型； 3）背景和邊框；4）文本效果；5）2D/3D轉換；6）動畫；7）多列布局；8）用戶界面

下面學習其中的一些模塊：

1.背景和邊框

1）CSS3背景

CSS3包含多個新的背景屬性，下面咱們看下這三個屬性

屬性	描述
background-size	繪製背景圖片的尺寸，能夠以像素或百分比（相對於父元素的寬度和高度）規定尺寸
background-origin	規定背景圖片的定位區域，能夠放置於 content-box、padding-box 或 border-box 區域（這些區域的分佈見附圖1）
background-clip	規定背景的繪製區域，語法：background-clip: border-box\|padding-box\|content-box;

2）CSS3邊框

經過 CSS3可以建立圓角邊框，向矩形添加陰影，使用圖片來繪製邊框。學習下實現這些效果的這三個屬性

屬性	描述
border-image	設置全部border-image-*屬性的簡寫屬性，看了W3school的介紹以爲有些還沒弄懂，再認真看了http://www.jb51.net/css/27855.html和http://www.jb51.net/css/38358.html這兩篇文章。
border-radius	設置全部四個 border-*-radius 屬性的簡寫屬性。
border-shadow	向方框添加一個或多個陰影，語法box-shadow: h-shadow v-shadow blur spread color inset；說明：h-shadow 水平陰影的位置，容許負值。v-shadow 垂直陰影的位置，容許負值。blur 模糊距離。spread 陰影的尺寸。color 陰影的顏色。inset 將外部陰影改成內部陰影。

附圖1：

看個綜合的練習：

效果：

代碼：

  1 <!DOCTYPE html>
  2 <html>
  3 <meta charset="utf-8" />
  4 <head>
  5 <style type="text/css">
  6 #div1
  7 {
  8 background:url(XiaoKeAi.jpg);
  9 background-size:100px 180px;
 10 background-repeat:no-repeat;
 11 padding-top:180px;
 12 }
 13 #div3
 14 {
 15 border:1px solid black;
 16 width:200px;
 17 height:200px;
 18 padding:50px;
 19 background:url(XiaoKeAi.jpg);
 20 background-repeat:no-repeat;
 21 background-position:left;
 22 background-origin:border-box;
 23 }
 24 #div4
 25 {
 26 border:1px solid black;
 27 width:200px;
 28 height:200px;
 29 padding:50px;
 30 background:url(XiaoKeAi.jpg);
 31 background-repeat:no-repeat;
 32 background-position:left;
 33 background-origin:content-box;
 34 }
 35 #div5
 36 {
 37 width:200px;
 38 height:200px;
 39 padding:50px;
 40 background-color:yellow;
 41 background-clip:border-box;
 42 border:2px solid #92b901;
 43 }
 44 #div6
 45 {
 46 width:200px;
 47 height:200px;
 48 padding:50px;
 49 background-color:yellow;
 50 background-clip:content-box;
 51 border:2px solid #92b901;
 52 }
 53 #div7
 54 {
 55 width:250px;
 56 height:100px;
 57 background-color:#ff9900;
 58 -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
 59 box-shadow: 10px 10px 5px #888888;
 60 }
 61 #div8
 62 {
 63 text-align:center;
 64 border:2px solid #a1a1a1;
 65 padding:10px 40px; 
 66 background:#dddddd;
 67 width:250px;
 68 border-radius:25px;
 69 -moz-border-radius:25px; /* 老的 Firefox */
 70 }
 71 #div9
 72 {
 73 border:15px solid transparent;
 74 width:250px;
 75 padding:10px 20px;
 76 -moz-border-image:url(border.jpg) 30 30 round;    /* Old Firefox */
 77 -webkit-border-image:url(border.jpg) 30 30 round;    /* Safari and Chrome */
 78 -o-border-image:url(border.jpg) 30 30 round;        /* Opera */
 79 border-image:url(border.jpg) 30 30 round;
 80 }
 81 #div10
 82 {
 83 border:15px solid transparent;
 84 width:250px;
 85 padding:10px 20px;
 86 -moz-border-image:url(border.jpg) 30 30 stretch;    /* Old Firefox */
 87 -webkit-border-image:url(border.jpg) 30 30 stretch;    /* Safari and Chrome */
 88 -o-border-image:url(border.jpg) 30 30 stretch;        /* Opera */
 89 border-image:url(border.jpg) 30 30 stretch;
 90 }
 91 </style>
 92 </head>
 93 <body>
 94 <table>
 95 <tr width="500px">
 96 <th width="250px">
 97 <p>1，看下background-size的效果:</p>
 98 <div id=div1>拉伸的背景圖片</div>
 99 </th>
100 <th width="250px">
101 <p>&nbsp;</p>
102 <div id=div2>原始圖片：<img src="XiaoKeAi.jpg" width="200" height="200" alt="小可愛"></div>
103  </th>
104  </tr>
105  
106 <tr width="500px">
107 <th >
108 <p>2，看下background-origin的效果：</p>
109 <p>background-origin:border-box:</p>
110 <div id="div3">
111 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
112 </div>
113 </th>
114 
115 <th>
116 <p>&nbsp;</p>
117 <p>background-origin:content-box:</p>
118 <div id="div4">
119 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
120 </div>
121 </th>
122 
123 </tr>
124 
125 <tr width="500px">
126 <th>
127 <p>3，看background-clip的效果：</p>
128 <p>background-clip:border-box:</p>
129 <div id="div5">
130 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
131 </div>
132 </th>
133 <th>
134 <p>&nbsp;</p>
135 <p>background-clip:content-box:</p>
136 <div id="div6">
137 這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。
138 </div>
139 </th>
140 </tr>
141 <tr width="500px">
142 <th>
143 <p>4，看CSS3邊框屬性的圓角和陰影效果：</p>
144 <p>background-clip:border-box:</p>
145 <div id="div7">
146 </div>
147 </th>
148 <th>
149 <p>&nbsp;</p>
150 <p>background-clip:content-box:</p>
151 <div id="div8">
152 border-radius 屬性容許您向元素添加圓角。
153 </div>
154 </th>
155 </tr>
156 <tr width="500px">
157 <th>
158 <p>5，看CSS3邊框圖片效果：</p>
159 <p>圖片鋪滿整個邊框:</p>
160 <div id="div9"> 在這裏，圖片鋪滿整個邊框。
161 </div>
162 </th>
163 <th>
164 <p>&nbsp;</p>
165 <p>圖片被拉伸以填充該區域:</p>
166 <div id="div10">
167 在這裏，圖片被拉伸以填充該區域。
168 </div>
169 </th>
170 </tr>
171 </body>
172 </html>

View Code

2.文本效果和字體應用

1）文本效果

新的文本屬性挺多，這裏介紹下text-shadow和text-wrap

屬性	描述
text-shadow	向文本設置陰影，語法：text-shadow: h-shadow v-shadow blur color;
word-wrap	容許長單詞換行到下一行，語法：word-wrap: normal\|break-word; normal 表示只在容許的斷字點換行（瀏覽器保持默認處理）。break-word 在長單詞或 URL 地址內部進行換行。

2）CSS3字體

在CSS3以前，Web設計師必須使用已在用戶計算機上安裝的字體。經過CSS3，Web設計師可使用任意字體（將該字體存放到web服務器上，它會在須要時自動下載到用戶的計算機上）

介紹下 @font-face 規則中定義的全部字體描述符：

①font-family 規定字體的名稱； ② src 定義字體文件的 URL； ③font-stretch 定義如何拉伸字體 ④font-style 定義字體的樣式； ⑤font-weight 定義字體的粗細；⑥unicode-range 定義字體支持的 UNICODE 字符範圍。默認是 "U+0-10FFFF"。

看下綜合的練習：

代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style>
 6 h1
 7 {
 8 text-shadow: 5px 5px 5px #FF0000;
 9 }
10 p.test
11 {
12 width:11em; 
13 border:4px solid #000000;
14 }
15 p.test1
16 {
17 width:11em; 
18 border:4px solid #000000;
19 word-wrap:break-word;
20 }
21 @font-face
22 {
23 font-family: myFirstFont;
24 src: url('Sansation_Regular.ttf')
25     ,url('Sansation_Regular.eot'); /* IE9+ */
26 }
27 @font-face
28 {
29 font-family: myFirstFont;
30 src: url('Sansation_Regular.ttf'); /* IE9+ */    
31     font-weight:bold;  /* 爲了使字體變粗，須爲粗體文本添加另外一個包含描述符的 @font-face：但是爲毛我這裏沒管用，RP問題？ */
32 }
33 #div1
34 {
35 font-family:myFirstFont;
36 }
37 </style>
38 </head>
39 <body>
40 
41 <h1>文本陰影效果！</h1>
42 <p class="test">沒有換行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
43 <p class="test1">換行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
44 <div id="div1">
45 字體的應用：
46 With <b>CSS3</b>, websites can finally use fonts other than the pre-selected "web-safe" fonts. This
47 </div>
48 <p><b>註釋：</b>Internet Explorer 9+ 支持新的 @font-face 規則。Internet Explorer 8 以及更早的版本不支持新的 @font-face 規則。</p>
49 </body>
50 </html>

View Code

3.2D轉換

在這一小節中，咱們將學到2D轉換的幾種方法

函數	描述
translate(x,y)	定義 2D 轉換，沿着 X 和 Y 軸移動元素。擴展translateX(n)和translateY(n)，意思分別是沿着x,y軸移動元素
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度。擴展scaleX(n)，scaleY(n)
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸。擴展skewX(angle)，skewY(angle)
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。

看下綜合練習的效果：

代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style> 
 6 div
 7 {
 8 width:100px;
 9 height:105px;
10 background-color:yellow;
11 border:1px solid black;
12 }
13 div#div1
14 {
15 transform:translate(100px,10px);
16 
17 }
18 div#div2
19 {
20 /* Rotate div */
21 transform:rotate(30deg);
22 float:left;
23 }
24 div#div3
25 {
26 margin:100px;/*注意這裏的運用，這彷佛能夠看出基點所在*/
27 transform:scale(2,2);
28 float:left;
29 }
30 div#div4
31 {
32 transform:skew(10deg,20deg);
33 float:left;
34 }
35 div#div5
36 {
37 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
38 float:left;
39 }
40 </style>
41 </head>
42 <body>
43 <div id="div1">Hello1，我是translate()方法，沿X軸移動100px,Y移動10px</div>
44 <div id="div2">Hello2，我是rotate()方法，旋轉了30度</div>
45 <div id="div3">Hello3，我是scale()方法 把寬度和高度轉換爲原始尺寸的 2 倍。</div>
46 <div id="div4">Hello4，我是skew()方法 圍繞 X 軸把元素翻轉 10 度，圍繞 Y 軸翻轉 20 度。</div>
47 <div id="div5">Hello5，我是skew()方法，使用六個值的矩陣。</div>
48 </body>
49 </html>

View Code

4.3D轉換

3D轉換的方法包含了2D轉換的哪些方法，不過加了Z軸。因此轉換的效果是不一樣，3D立體嘛。。。

看下3D轉換方法中使用這兩個方法 rotateX()；rotateY()的效果：

代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8" />
 4 <head>
 5 <style> 
 6 div
 7 {
 8 width:100px;
 9 height:105px;
10 background-color:yellow;
11 border:1px solid black;
12 }
13 div#div1
14 {
15 transform:rotateX(120deg);
16 float:left;
17 }
18 div#div2
19 {
20 transform:rotateY(130deg);
21 float:left;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="div">Hello,我是標準。看下其餘兩種方法旋轉的效果</div>
27 <div id="div1">Hello1，我是rotateX()方法，圍繞X軸旋轉120度</div>
28 <div id="div2">Hello2，我rotateY()方法，圍繞Y軸旋轉130度</div>
29 </body>
30 </html>

View Code

5.過渡

CSS3 過渡是元素從一種樣式逐漸改變爲另外一種的效果。這種效果像動畫挺好玩的~~【原來就是CSS3中的動畫( ╯□╰ )】

舉例：

請把鼠標指針放到黃色的 div 元素上，來查看過渡效果。

關鍵代碼：

div
{
width:100px;
transition: width 2s;
}

div:hover
{
width:300px;
}

能夠看出這個transition屬性起的做用，學習下它。

語法：transition: property duration timing-function delay;

屬性	描述
transition-property	規定應用過渡的 CSS 屬性的名稱
transition-duration	定義過渡效果花費的時間。默認是 0。
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。語法：transition-timing-function: linear\|ease\|ease-in\|ease-out\|ease-in-out\|cubic- bezier(n,n,n,n); 說明下ease的描述，ease：規定慢速開始，而後變快，而後慢速結束的過渡效果（等於cubic-bezier(0.25,0.1,0.25,1)）。
transition-delay	規定過渡效果什麼時候開始。默認是 0。

6.動畫

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。

CSS3 動畫

舉例：

關鍵代碼：

@keyframes myfirst 
 {  
  0% {background:red; left:0px; top:0px;}  
  25% {background:yellow; left:50px; top:0px;} 
  50% {background:blue; left:50px; top:50px;}  
  75% {background:green; left:0px; top:50px;}  
  100% {background:red; left:0px; top:0px;}
 }
 div
 {
 width:50px;
 height:50px;
 background:red;
 position:relative;
 animation:myfirst 5s linear 2s infinite alternate;
 }

能夠看出，首先用@keyframes 規則建立動畫，

上述的 myfirst 規則中百分比是來規定動畫在某個時間段作的事情，0% 是動畫的開始，100% 是動畫的完成（也能夠用關鍵詞"from" 和 "to"，等同於 0% 和 100%。）

再來看animation屬性

語法：animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。默認值：ease（跟上述的過渡是同樣的）
animation-delay	規定在動畫開始以前的延遲。值以秒或毫秒計。
animation-iteration-count	定義動畫的播放次數 infinite 表示無限次
animation-direction	規定是否應該輪流反向播放動畫 alternate表示輪流反向播放