CSS3艺术 网页设计案例实战PDF电子书下载

第1章 CSS基础知识 1

1.1 CSS简介 2

1.2 在页面中应用CSS 2

1.2.1 内联样式 2

1.2.2 style元素 3

1.2.3 link标记 3

1.3 常用CSS属性一览 4

1.4 选择器 5

1.4.1 标签选择器 5

1.4.2 类选择器 6

1.4.3 后代选择器 7

1.4.4 伪类选择器 8

1.5 单位 15

1.5.1 长度 15

1.5.2 颜色 17

1.6 盒模型 21

1.6.1 内边距、边框和外边距 21

1.6.2 box-sizing 22

1.7 定位 23

1.7.1 相对定位 24

1.7.2 绝对定位 25

1.8 布局 26

1.8.1 flex布局 26

1.8.2 grid布局 30

1.9 重叠 32

1.9.1 元素之间的重叠关系 32

1.9.2 含有子元素的容器之间的重叠关系 34

1.9.3 主元素与子元素（伪元素）之间的重叠关系 35

1.10 继承和引用 36

1.10.1 继承 36

1.10.2 引用颜色 37

1.10.3 引用尺寸 39

第2章 伪元素 40

2.1 ::before和::after伪元素 41

2.2 content属性 42

2.3 灵活使用伪元素 44

2.3.1 用伪元素拼接造型 44

2.3.2 用主元素和伪元素拼接造型 45

2.3.3 用伪元素表现造型的一部分 46

2.3.4 用主元素和伪元素表现造型的3个部分 48

2.3.5 用伪元素表现成对的元素 49

2.4 项目应用 51

2.4.1 项目一：蒸锅 51

2.4.2 项目二：怪兽 55

第3章 边框 63

3.1 边框属性 64

3.1.1 边框样式border-style 64

3.1.2 边框宽度border-width 64

3.1.3 边框颜色border-color 65

3.1.4 分别设置每条边框 65

3.1.5 边框圆角border-radius 66

3.1.6 轮廓线outline 68

3.2 描边造型 69

3.2.1 同心正方形 70

3.2.2 同心圆 70

3.2.3 圆弧 71

3.3 几何造型 72

3.3.1 圆形 72

3.3.2 半圆形 73

3.3.3 扇形 74

3.3.4 三角形 76

3.3.5 组合的花形 77

3.4 项目应用 78

3.4.1 项目一：铅笔 78

3.4.2 项目二：宇宙飞船 83

第4章 背景 89

4.1 背景属性 90

4.1.1 背景颜色background-color 90

4.1.2 背景图片background-image 91

4.1.3 背景位置background-position 91

4.1.4 背景尺寸background-size 92

4.1.5 背景平铺background-repeat 93

4.2 线性渐变linear-gradient（） 94

4.2.1 多个参数值 94

4.2.2 锐利的线性渐变 95

4.2.3 线性渐变的角度 95

4.2.4 有透明度的线性渐变 96

4.3 径向渐变radial-gradient（） 96

4.3.1 多个参数值 96

4.3.2 锐利的径向渐变 97

4.3.3 椭圆和正圆 97

4.3.4 有透明度的径向渐变 98

4.4 项目应用 99

4.4.1 项目一：熊猫 99

4.4.2 项目二：雷达扫描 105

第5章 阴影 111

5.1 盒阴影box-shadow 112

5.1.1 外部阴影 112

5.1.2 内部阴影 115

5.1.3 多重阴影 116

5.1.4 复制自身的阴影 117

5.2 形状阴影函数drop-shadow（） 118

5.3 项目应用 120

5.3.1 项目一：日历 120

5.3.2 项目二：飞机舷窗 124

第6章 剪切、滤镜和色彩混合 130

6.1 剪切clip-path 131

6.1.1 矩形剪切inset（） 131

6.1.2 圆形剪切circle（） 132

6.1.3 椭圆形剪切ellipse（） 133

6.1.4 多边形剪切polygon（） 133

6.2 滤镜filter 134

6.2.1 透明度滤镜opacity（） 135

6.2.2 模糊滤镜blur（） 135

6.2.3 色相滤镜hue-rotate（） 135

6.2.4 亮度滤镜brightness（） 136

6.2.5 对比度滤镜contrast（） 137

6.2.6 多重滤镜 139

6.3 色彩混合 139

6.3.1 multiply模式 139

6.3.2 screen模式 140

6.3.3 difference模式 140

6.3.4 color-dodge模式 141

6.4 项目应用 141

6.4.1 项目一：莲花 141

6.4.2 项目二：彭罗斯三角形 145

第7章 变量与计数器 151

7.1 变量 152

7.1.1 声明和引用变量 152

7.1.2 表达式 155

7.1.3 批量描述一组元素的样式 157

7.2 计数器 159

7.2.1 计数器的声明、累加和读取 159

7.2.2 计数器初始值和步长 161

7.2.3 计数器的序列值 161

7.2.4 用计数器设计一个字母表 162

7.3 项目应用 164

7.3.1 项目一：监控眼 164

7.3.2 项目二：纸鹤 168

第8章 变换 173

8.1 变换函数 174

8.1.1 平移函数translate（） 174

8.1.2 旋转函数rotate（） 176

8.1.3 缩放函数scale（） 178

8.1.4 扭曲函数skew（） 181

8.2 变换原点transform-origin 184

8.3 多重变换 187

8.4 项目应用 189

8.4.1 项目一：炫彩旋臂 189

8.4.2 项目二：两只鹦鹉 192

第9章 缓动 198

9.1 缓动属性 199

9.1.1 持续时长transition-duration 199

9.1.2 延时启动时长transition-delay 200

9.1.3 参与缓动的属性transition-property 200

9.1.4 时间函数transition-timing-function 201

9.2 设置恢复效果 204

9.3 令一组元素缓动 205

9.4 对元素的不同状态进行交互设计 206

9.4.1 获得焦点：focus 206

9.4.2 选择选项：checked 207

9.4.3 页内跳转：target 208

9.5 项目应用 209

9.5.1 项目一：彩虹 209

9.5.2 项目二：两颗爱心 213

第10章 动画 219

10.1 动画属性 220

10.1.1 语法结构 220

10.1.2 持续时长animation-duration 221

10.1.3 延时启动时长animation-delay 222

10.1.4 时间函数animation-timing-function 224

10.1.5 播放次数animation-iteration-count 224

10.1.6 变化方向animation-direction 225

10.1.7 填充模式animation-fill-mode 226

10.1.8 播放状态animation-play-state 228

10.1.9 多个动画效果叠加 229

10.2 关键帧@keyframes 230

10.2.1 from...to...关键帧 230

10.2.2 百分比关键帧 231

10.2.3 循环效果 231

10.2.4 静止效果 233

10.2.5 关键帧的缺点 234

10.3 不同属性的动画效果 235

10.3.1 边框动画 235

10.3.2 背景动画 236

10.3.3 阴影动画 237

10.3.4 剪切动画 238

10.3.5 变换动画 239

10.4 项目应用 240

10.4.1 项目一：乒乓球对打 240

10.4.2 项目二：徘徊的果冻怪兽 244

第11章 CSS造型创意 250

11.1 螺旋形状的盘式蚊香 251

11.2 倒圆锥形状的热气球 256

11.3 逼真金属质感的笔记本电脑 261

11.4 用典型特征塑造的卓别林形象 266

第12章 CSS动画创意 272

12.1 层叠起伏的海浪 273

12.2 天体运转模型 277

12.3 充满秩序美的队列变色旋转动画 283

12.4 几何光学引起的咖啡馆墙壁错觉动画 287

第13章 文字特效创意 292

13.1 撕纸文字 293

13.2 牛奶文字 296

13.3 闪光的霓虹文字 300

13.4 立体的阶梯文字 306

附录 CSS色彩名称对照表 312