- 漸變
- 轉(zhuǎn)換（又稱變形）
- 過渡
- 多列
- 動畫
- 復雜選擇器
漸變
- 線性漸變
- 徑向漸變
- 重復漸變（線性-徑向漸變）
轉(zhuǎn)換
實現(xiàn)縮放、旋轉(zhuǎn)等效果。
例子：
<code>
#d1{
width:400px;
height:300px;
background-color : red;
}
#d1:hover{
transform : rotate(90 deg) scale(0.8);
}
上段代碼含義是當鼠標移動到id屬性為"d1"的元素時，其元素順時針旋轉(zhuǎn)90°且縮小到0.8。
rotate(90 deg) : id屬性為"d1"的元素順時針旋轉(zhuǎn)90°
scale(0.8) : id屬性為"d1"的元素縮小到0.8倍
</code>
過渡
在一定時間內(nèi)，完成某種動畫的效果，如背景色、邊框、旋轉(zhuǎn)等。
例子：
<code>
#d2{
width:400px;
height:300px;
background-color : red;
}
#d2:hover{
background : red;
transition : background 4s;
}
上段代碼含義是當鼠標移動到id屬性為"d2"的元素時，元素在4s內(nèi)，背景色由原來的白色變成紅色。
transition : background 4s : 在4s內(nèi)背景色發(fā)生變化
</code>
多列
將文本內(nèi)容設計成多列布局
<code>
.class1{
column-count:3;
}
<body>
<div class="class1">“當我年輕的時候，我夢想改變這個世界；當我成熟以后，我發(fā)現(xiàn)我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當我現(xiàn)在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個世界?！?br>
</div>
</body>
上段代碼含義是文本被分成三列顯示
</code>
動畫
使元素從一種樣式逐漸變化為另一種樣式的效果，可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)?？捎冒俜直葋硪?guī)定變化發(fā)生的時間，或用關鍵詞 "from" 和 "to"，等同于 0%（動畫起始） 和 100%（動畫完成）。
<code>
div{
width : 100px;
height : 100px;
background : red;
animation : donghua 5s;
}
@keyframes donghua {
0% {background: red;}
50% {background: blue;}
100% {background: green;}
}
上述代碼的含義是：div塊在5s內(nèi)，由紅變藍再變綠。
0% {background: red;} <=> from {background : red;}
100% {background: green;} <=> to {background : green;}
</code>
復雜選擇器
- 兄弟選擇器
- 相鄰兄弟選擇器：以“+”連接（形如 element1+element2)；選擇緊挨著下一個元素，二者必有同一個父元素
- 通用兄弟選擇器：以“~”連接（形如 element1~element2）；兩種元素必有同一個父元素，但element2不一定緊隨element1。
- 屬性選擇器
- [id] : 有id屬性的所有元素
- E[id] : 有id屬性的所有E元素
- E[id][class] : 有id和class屬性的所有E元素
- E[id="id1"] : 有id="id1"的E元素
- E[class="myClass"] : class屬性為“myClass”的所有E元素
- E[class~="myClass"] : class屬性是詞列表，并且以空格隔開，其中詞列表中包含了一個“myClass”詞的所有E元素
- E[class^="b"] : class屬性以“b”開頭的所有E元素
- E[class*="b"] : class屬性包含子串“b”的所有E元素
- E[class$="b"] : class屬性以“b”結(jié)尾的所有E元素
- E[class|="b"] : class屬性以“b”開頭或以“b-”開頭的所有E元素
- 偽類選擇器
- 偽元素選擇器
