- 漸變
- 轉(zhuǎn)換（又稱變形）
- 過渡
- 多列
- 動畫
- 復(fù)雜選擇器
漸變
- 線性漸變
- 徑向漸變
- 重復(fù)漸變（線性-徑向漸變）
轉(zhuǎn)換
實現(xiàn)縮放豆巨、旋轉(zhuǎn)等效果。
例子：
<code>
#d1{
width:400px;
height:300px;
background-color : red;
}
#d1:hover{
transform : rotate(90 deg) scale(0.8);
}
上段代碼含義是當(dāng)鼠標(biāo)移動到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;
}
上段代碼含義是當(dāng)鼠標(biāo)移動到id屬性為"d2"的元素時刽脖，元素在4s內(nèi)羞海，背景色由原來的白色變成紅色。
transition : background 4s : 在4s內(nèi)背景色發(fā)生變化
</code>
多列
將文本內(nèi)容設(shè)計成多列布局
<code>
.class1{
column-count:3;
}
<body>
<div class="class1">“當(dāng)我年輕的時候曲管，我夢想改變這個世界却邓；當(dāng)我成熟以后，我發(fā)現(xiàn)我不能夠改變這個世界院水，我將目光縮短了些腊徙，決定只改變我的國家；當(dāng)我進(jìn)入暮年以后檬某，我發(fā)現(xiàn)我不能夠改變我們的國家撬腾，我的最后愿望僅僅是改變一下我的家庭，但是恢恼，這也不可能民傻。當(dāng)我現(xiàn)在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己饰潜，然后，我可能改變我的家庭和簸；在家人的幫助和鼓勵下彭雾，我可能為國家做一些事情；然后锁保，誰知道呢?我甚至可能改變這個世界薯酝。”
</div>
</body>
上段代碼含義是文本被分成三列顯示
</code>
動畫
使元素從一種樣式逐漸變化為另一種樣式的效果爽柒，可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)吴菠。可用百分比來規(guī)定變化發(fā)生的時間浩村，或用關(guān)鍵詞 "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)心墅，由紅變藍(lán)再變綠酿矢。
0% {background: red;} <=> from {background : red;}
100% {background: green;} <=> to {background : green;}
</code>
復(fù)雜選擇器
- 兄弟選擇器
- 相鄰兄弟選擇器：以“+”連接（形如 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元素
- 偽類選擇器
- 偽元素選擇器
