CSS3 藝術 網頁設計案例實戰

張偶
擁有Web開發近20年工作經驗，现為互聯網公司web開發主管。曾入選 SegmentFault 社區年度榜排名前3位，亦是 CodePen 社區較受歡迎的國内開發者之一。近年来實踐 PBL（project-based learning）學習方法，潜心研究 CSS 藝術設計，壘累了大量心得體會。

第1章CSS基礎知識
1.1 CSS簡介
1.2在頁面中應用CSS
1.2.1內聯樣式
1.2.2 style元素
1.2.3 link標記
1.3常用CSS屬性一覽
1.4選擇器
1.4.1標籤選擇器
1.4.2類選擇器
1.4.3後代選擇器
1.4.4偽類選擇器
1.5單位
1.5.1長度
1.5.2顏色
1.6盒模型
1.6.1內邊距、邊框和外邊距
1.6.2 box-sizing
1.7定位
1.7.1相對定位
1.7.2絕對定位
1.8佈局
1.8.1 flex佈局
1.8.2 grid佈局
1.9重疊
1.9.1元素之間的重疊關係
1.9.2含有子元素的容器之間的重疊關係
1.9.3主元素與子元素（偽元素）之間的重疊關係
1.10繼承和引用
1.10.1繼承
1.10.2引用顏色
1.10.3引用尺寸

第2章偽元素
2.1 ::before和::after偽元素
2.2 content屬性
2.3靈活使用偽元素
2.3 .1用偽元素拼接造型
2.3.2用主元素和偽元素拼接造型
2.3.3用偽元素表現造型的一部分
2.3.4用主元素和偽元素表現造型的3個部分
2.3.5用偽元素表現成對的元素
2.4項目應用
2.4.1項目一：蒸鍋
2.4.2項目二：怪獸

第3章邊框
3.1邊框屬性
3.1.1邊框樣式border-style
3.1.2邊框寬度border-width
3.1.3邊框顏色border-color
3.1.4分別設置每條邊框
3.1.5邊框圓角border-radius
3.1.6輪廓線outline
3.2描邊造型
3.2.1同心正方形
3.2.2同心圓
3.2.3圓弧
3.3幾何造型
3.3.1圓形
3.3.2半圓形
3.3.3扇形
3.3.4三角形
3.3.5組合的花形
3.4項目應用
3.4.1項目一：鉛筆
3.4.2項目二：宇宙飛船

第4章背景
4.1背景屬性
4.1.1背景顏色background-color
4.1.2背景圖片background-image
4.1.3背景位置backgroundposition
4.1.4背景尺寸background-size
4.1.5背景平鋪backgroundrepeat
4.2線性漸變linear-gradient()
4.2.1多個參數值
4.2.2銳利的線性漸變
4.2.3線性漸變的角度
4.2.4有透明度的線性漸變
4.3徑向漸變radial-gradient()
4.3.1多個參數值
4.3.2銳利的徑向漸變
4.3.3橢圓和正圓
4.3.4有透明度的徑向漸變
4.4項目應用
4.4.1項目一：熊貓
4.4 .2項目二：雷達掃描

第5章陰影
5.1盒陰影box-shadow
5.1.1外部陰影
5.1.2內部陰影
5.1.3多重陰影
5.1.4複製自身的陰影
5.2形狀陰影函數drop-shadow()
5.3項目應用
5.3.1項目一：日曆
5.3.2項目二：飛機舷窗

第6章剪切、濾鏡和色彩混合
6.1剪切clip-path
6.1.1矩形剪切inset()
6.1.2圓形剪切circle ()
6.1.3橢圓形剪切ellipse()
6.1.4多邊形剪切polygon()
6.2濾鏡filter
6.2.1透明度濾鏡opacity()
6.2.2模糊濾鏡blur()
6.2.3色相濾鏡hue -rotate()
6.2.4亮度濾鏡brightness()
6.2.5對比度濾鏡contrast()
6.2.6多重濾鏡
6.3色彩混合
6.3.1 multiply模式
6.3.2 screen模式
6.3.3 difference模式
6.3.4 color-dodge模式
6.4項目應用
6.4.1項目一：蓮花
6.4.2項目二：彭羅斯三角形

第7章變量與計數器
7.1變量
7.1.1聲明和引用變量
7.1.2表達式
7.1.3批量描述一組元素的樣式
7.2計數器
7.2.1計數器的聲明、累加和讀取
7.2.2計數器初始值和步長
7.2.3計數器的序列值
7.2.4用計數器設計一個字母表
7.3項目應用
7.3.1項目一：監控眼
7.3.2項目二：紙鶴

第8章變換
8.1變換函數
8.1.1平移函數translate()
8.1.2旋轉函數rotate()
8.1.3縮放函數scale()
8.1.4扭曲函數skew()
8.2變換原點transform-origin
8.3多重變換
8.4項目應用
8.4.1項目一：炫彩旋臂
8.4.2項目二：兩隻鸚鵡

第9章緩動
9.1緩動屬性
9.1. 1持續時長transitionduration
9.1.2延時啟動時長transitiondelay
9.1.3參與緩動的屬性transitionproperty
9.1.4時間函數transition-timingfunction
9.2設置恢復效果
9.3令一組元素緩動
9.4對元素的不同狀態進行交互設計
9.4 .1獲得焦點:focus
9.4.2選擇選項:checked
9.4.3頁內跳轉:target
9.5項目應用
9.5.1項目一：彩虹
9.5.2項目二：兩顆愛心

第10章動畫
10.1動畫屬性
10.1. 1語法結構
10.1.2持續時長animationduration
10.1.3延時啟動時長animationdelay
10.1.4時間函數animation-timingfunction
10.1.5播放次數animation-iterationcount
10.1.6變化方向animationdirection
10.1.7填充模式animation-fillmode
10.1.8播放狀態animation-playstate
10.1.9多個動畫效果疊加
10.2關鍵幀@ keyframes
10.2.1 from...to...關鍵幀
10.2.2百分比關鍵幀
10.2.3循環效果
10.2.4靜止效果
10.2.5關鍵幀的缺點
10.3不同屬性的動畫效果
10.3.1邊框動畫
10.3. 2背景動畫
10.3.3陰影動畫
10.3.4剪切動畫
10.3.5變換動畫
10.4項目應用
10.4.1項目一：乒乓球對打
10.4.2項目二：徘徊的果凍怪獸

第11章CSS造型創意
11.1螺旋形狀的盤式蚊香
11.2倒圓錐形狀的熱氣球
11.3逼真金屬質感的筆記本電腦
11.4用典型特徵塑造的卓別林形象

第12章CSS動畫創意
12.1層疊起伏的海浪
12.2天體運轉模型
12.3充滿秩序美的隊列變色旋轉動畫
12.4幾何光學引起的咖啡館牆壁錯覺動畫

第13章文字特效創意
13.1撕紙文字
13.2牛奶文字
13.3閃光的霓虹文字
13.4立體的階梯文字

附錄CSS色彩名稱對照表