《CSS3艺术 网页设计案例实战》求取 ⇩

第1章CSS基础知识1

1.1 CSS简介2

1.2在页面中应用CSS2

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-sizing22

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-style64

3.1.2 边框宽度border-width64

3.1.3 边框颜色border-color65

3.1.4 分别设置每条边框65

3.1.5 边框圆角border-radius66

3.1.6 轮廓线outline68

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-color90

4.1.2 背景图片background-image91

4.1.3 背景位置background-position91

4.1.4 背景尺寸background-size92

4.1.5 背景平铺background-repeat93

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-shadow112

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-path131

6.1.1 矩形剪切inset（）131

6.1.2 圆形剪切circle（）132

6.1.3 椭圆形剪切ellipse（）133

6.1.4 多边形剪切polygon（）133

6.2滤镜filter134

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-origin184

8.3 多重变换187

8.4项目应用189

8.4.1 项目一：炫彩旋臂189

8.4.2 项目二：两只鹦鹉192

第9章缓动198

9.1缓动属性199

9.1.1 持续时长transition-duration199

9.1.2 延时启动时长transition-delay200

9.1.3 参与缓动的属性transition-property200

9.1.4 时间函数transition-timing-function201

9.2 设置恢复效果204

9.3 令一组元素缓动205

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

9.4.1 获得焦点：focus206

9.4.2 选择选项：checked207

9.4.3 页内跳转：target208

9.5项目应用209

9.5.1 项目一：彩虹209

9.5.2 项目二：两颗爱心213

第10章动画219

10.1动画属性220

10.1.1 语法结构220

10.1.2 持续时长animation-duration221

10.1.3 延时启动时长animation-delay222

10.1.4 时间函数animation-timing-function224

10.1.5 播放次数animation-iteration-count224

10.1.6 变化方向animation-direction225

10.1.7 填充模式animation-fill-mode226

10.1.8 播放状态animation-play-state228

10.1.9 多个动画效果叠加229

10.2关键帧@keyframes230

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