网上科普有关“HTML5+CSS3从入门到精通的作品目录 ”话题很是火热 ，小编也是针对HTML5+CSS3从入门到精通的作品目录寻找了一些与之相关的一些信息进行分析
，如果能碰巧解决你现在面临的问题，希望能够帮助到您。

第1章 Web开发新时代 1

1.1 HTML5概述 2

1.1.1 HTML5新特性 2

1.1.2 HTML5组织 3

1.1.3 HTML5构成 4

1.2 HTML5设计原理 4

1.2.1 HTML开发历程 5

1.2.2 HTML5开发动力 6

1.2.3 HTML5设计理念 7

1.3 编写第一个HTML5页面 14

1.3.1 搭建上机练习环境 14

1.3.2 检测浏览器是否支持 14

1.3.3 使用HTML5编写简单的Web页面 15

1.4 HTML5页面的特征 17

1.4.1 使用HTML5结构化元素 17

1.4.2 使用CSS美化HTML5文档 19

第2章 从HTML、XHTML到HTML5 21

视频讲解：2小时

2.1 HTML基础 22

2.1.1 HTML简介 22

2.1.2 HTML特性 22

2.1.3 HTML结构 23

2.1.4 HTML语法 23

2.1.5 HTML标签 25

2.1.6 HTML属性 29

2.2 XHTML基础 32

2.2.1 XHTML结构 32

2.2.2 XHTML语法 33

2.2.3 XHTML类型 34

2.2.4 DTD解析 35

2.2.5 命名空间 37

2.3 HTML5基础 38

2.3.1 HTML5语法 38

2.3.2 HTML5元素 40

2.3.3 HTML5增加及废除的属性 46

2.3.4 HTML5全局属性 48

2.3.5 HTML5其他功能 50

第3章 创建HTML5文档 54

视频讲解：1小时13分钟

3.1 认识HTML5文档结构 55

3.2 HTML5元素分类 58

3.3 构建主体内容 59

3.3.1 标识文章 59

3.3.2 给内容分段 61

3.3.3 设计导航信息 64

3.3.4 设计辅助信息 66

3.3.5 设计微格式 67

3.3.6 添加发布日期 68

3.4 添加语义模块 69

3.4.1 添加标题块 69

3.4.2 给标题分组 70

3.4.3 添加脚注块 70

3.4.4 添加联系信息 71

3.5 综合实战：使用HTML5设计博客主页 72

3.5.1 设计大纲 73

3.5.2 设计样式 76

第4章 实战HTML5表单 79

视频讲解：1小时08分钟

4.1 新增的input输入类型 80

4.1.1 email类型的应用 80

4.1.2 url类型的应用 82

4.1.3 number类型的应用 83

4.1.4 range类型的应用 84

4.1.5 日期检出器类型的应用 85

4.1.6 search类型的应用 90

4.1.7 tel类型的应用 91

4.1.8 color类型的应用 92

4.2 新增的input属性 93

4.2.1 新增的autocomplete属性 93

4.2.2 新增的autofocus属性 95

4.2.3 新增的form属性 96

4.2.4 新增的表单重写属性 97

4.2.5 新增的height与width属性 98

4.2.6 新增的list属性 98

4.2.7 新增的min 、max和step属性 99

4.2.8 新增的multiple属性 100

4.2.9 新增的pattern属性 101

4.2.10 新增的placeholder属性 101

4.2.11 新增的required属性 102

4.3 新增的form元素 103

4.3.1 新增的datalist元素 103

4.3.2 新增的keygen元素 103

4.3.3 新增的output元素 104

4.4 新增的form属性 105

4.4.1 新增的autocomplete属性 105

4.4.2 新增的novalidate属性 105

第5章 实战HTML5画布 106

视频讲解：2小时

5.1 认识HTML5 canvas元素 107

5.1.1 在页面中添加canvas元素 107

5.1.2 Canvas如何绘制图形 108

5.1.3 认识Canvas坐标 109

5.1.4 何时不用Canvas 109

5.1.5 如果浏览器不支持Canvas 110

5.1.6 检测浏览器支持 110

5.2 绘制简单图形 111

5.2.1 绘制直线 111

5.2.2 绘制矩形 112

5.2.3 绘制圆形 113

5.2.4 绘制三角形 115

5.2.5 清空画布 116

5.3 绘制贝塞尔曲线 117

5.3.1 绘制二次方贝塞尔曲线 118

5.3.2 绘制三次方贝塞尔曲线 119

5.4 图形的变换 120

5.4.1 保存与恢复Canvas状态 120

5.4.2 移动坐标空间 121

5.4.3 旋转坐标空间 123

5.4.4 缩放图形 125

5.4.5 矩阵变换 126

5.5 图形的组合与裁切 129

5.5.1 图形的组合 129

5.5.2 裁切路径 132

5.6 更多的颜色和样式选项 133

5.6.1 应用不同的线型 133

5.6.2 绘制线性渐变 138

5.6.3 绘制径向渐变 139

5.6.4 绘制图案 140

5.6.5 设置图形的透明度 141

5.6.6 创建阴影 142

5.7 绘制文字 144

5.7.1 绘制填充文字 144

5.7.2 文字相关属性 145

5.7.3 绘制轮廓文字 145

5.7.4 测量文字宽度 146

5.8 操作与使用图像 147

5.8.1 向Canvas中引入图像 147

5.8.2 改变图像大小 149

5.8.3 创建图像切片 150

第6章 HTML5音频与视频 152

视频讲解：50分钟

6.1 HTML5多媒体技术概述 153

6.1.1 关于编解码器 153

6.1.2 音频编解码器 153

6.1.3 视频编解码器 154

6.2 浏览器支持概述 156

6.2.1 用JavaScript检测音频格式支持情况 157

6.2.2 用JavaScript检测视频格式支持情况 158

6.3 在HTML5中播放音频 159

6.3.1 认识audio元素 159

6.3.2 播放音频 160

6.4 在HTML5中播放视频 161

6.4.1 认识video元素 161

6.4.2 播放视频 162

6.5 音频与视频相关属性
、方法与事件 164

6.5.1 音频与视频相关属性 164

6.5.2 音频与视频相关方法 167

6.5.3 音频与视频相关事件 168

6.6 综合实战 169

6.6.1 用脚本控制音乐播放 169

6.6.2 查看视频帧画面 170

第7章 Web存储 175

视频讲解：1小时20分钟

7.1 认识Web Storage 176

7.1.1 Cookie存储机制的优缺点 176

7.1.2 为什么要用Web Storage 176

7.1.3 Web Storage的优缺点 177

7.1.4 浏览器支持概述 177

7.2 使用Web Storage 178

7.2.1 检查浏览器的支持性 178

7.2.2 设置和获取数据 180

7.2.3 防止数据泄露 181

7.2.4 Web Storage的其他用法 181

7.2.5 Web Storage事件监测 182

7.2.6 实例1：设计网页皮肤 183

7.2.7 实例2：跟踪localStorage数据 184

7.2.8 实例3：设计计数器 186

7.2.9 综合应用：Web应用项目实时跟踪 187

7.3 Web SQL数据库 192

7.3.1 Web SQL数据库概述 192

7.3.2 使用Web SQL数据库 193

7.3.3 实例1：创建简单的本地数据库 195

7.3.4 实例2：批量存储本地数据 198

7.3.5 综合应用：Web Storage和

Web SQL混合开发 199

第8章 离线应用 207

视频讲解：23分钟

8.1 HTML5离线应用概述 208

8.1.1 为什么要学习HTML5离线应用 208

8.1.2 浏览器支持概述 209

8.2 HTML5离线应用详解 210

8.2.1 解析manifest文件 210

8.2.2 搭建离线应用程序 213

8.2.3 检查浏览器是否支持 213

8.2.4 离线缓存更新实现 213

8.2.5 JavaScript接口实现 214

8.2.6 离线存储事件监听 217

8.3 实战1：缓存首页 218

8.4 实战2：离线编辑内容 221

8.5 实战3：离线跟踪 225

第9章 Workers多线程处理 231

视频讲解：1小时01分钟

9.1 认识Web Workers 232

9.1.1 Web Workers概述 232

9.1.2 浏览器支持概述 233

9.1.3 熟悉Web Workers成员 233

9.2 使用Web Workers 234

9.2.1 检查浏览器支持性 234

9.2.2 创建Web Workers 234

9.2.3 与Web Workers通信 235

9.2.4 使用Web Workers上机练习 237

9.3 案例实战 240

9.3.1 使用多线程实现后台运算 240

9.3.2 在后台过滤值 242

9.3.3 多任务并发处理 243

9.3.4 在多线程之间通信 246

9.3.5 使用线程技术计算Fibonacci数列 248

9.3.6 使用多线程绘图 249

9.4 综合应用：模拟退火算法 253

9.4.1 认识模拟退火算法 253

9.4.2 编写应用主页面 254

9.4.3 编写worker.js 256

9.4.4 与Web Workers通信 257

第10章 Geolocation地理位置 261

10.1 位置信息概述 262

10.1.1 为什么要学习Geolocation 262

10.1.2 位置信息表示方式 262

10.1.3 位置信息来源 262

10.1.4 IP定位 263

10.1.5 GPS定位 263

10.1.6 Wi-Fi定位 263

10.1.7 手机定位 264

10.1.8 自定义定位 264

10.2 使用Geolocation API 264

10.2.1 检查浏览器支持性 264

10.2.2 获取当前地理位置 265

10.2.3 监视位置信息 267

10.2.4 停止获取位置信息 267

10.2.5 隐私保护 267

10.2.6 处理位置信息 267

10.2.7 使用position对象 268

10.3 案例实战 269

10.3.1 使用Google地图 269

10.3.2 跟踪行走速度 271

第11章 CSS3概述 277

视频讲解：1小时01分钟

11.1 回顾CSS 278

11.1.1 CSS发展简史 278

11.1.2 CSS 1.0和CSS 2.0概述 278

11.1.3 CSS与DIV标记之缘 285

11.1.4 CSS编码规范 288

11.2 了解CSS3新增特性 289

11.2.1 属性选择器 289

11.2.2 RBGA 透明度 291

11.2.3 多栏布局 292

11.2.4 多背景 294

11.2.5 字符串溢出 295

11.2.6 块阴影与圆角阴影 296

11.2.7 圆角 297

11.2.8 边框 298

11.2.9 形变 299

11.3 CSS3前景展望 301

11.3.1 CSS3的应用范围 302

11.3.2 当前支持CSS3的浏览器 303

11.4 案例实战：设计漂亮的表单 305

第12章 CSS选择器 310

视频讲解：34分钟

12.1 属性选择器 311

12.1.1 认识属性选择器 311

12.1.2 案例实战 312

12.2 结构伪类选择器 314

12.2.1 认识结构伪类选择器 314

12.2.2 案例实战 315

12.3 UI伪类选择器 321

12.3.1 认识常用UI伪类选择器 321

12.3.2 案例实战 322

12.4 其他选择器 324

第13章 文本、字体与颜色 330

视频讲解：49分钟

13.1 设计文本阴影 331

13.1.1 定义text-shadow属性 331

13.1.2 应用阴影效果 333

13.1.3 综合实战：设计黑客网站首页 339

13.2 定义文本样式 341

13.2.1 文本样式简介 341

13.2.2 溢出文本 345

13.2.3 文本换行 347

13.3 设计颜色样式 353

13.3.1 使用RGBA颜色值 353

13.3.2 使用HSL颜色值 355

13.3.3 使用HSLA颜色值 359

13.3.4 定义opacity属性 360

13.3.5 定义transparent颜色值 363

第14章 背景和边框 365

视频讲解：1小时09分钟

14.1 设计多色边框 366

14.1.1 用法详解 366

14.1.2 案例实战 368

14.2 设计边框背景 368

14.2.1 用法详解 369

14.2.2 案例实战 372

14.3 设计圆角 375

14.3.1 用法详解 376

14.3.2 案例实战：设计椭圆图形 379

14.4 设计阴影 380

14.4.1 用法详解 380

14.4.2 案例实战：设计Windows7界面效果 385

14.5 设计背景 390

14.5.1 定义背景坐标 390

14.5.2 定义背景裁剪区域 392

14.5.3 定义背景图像大小 395

14.5.4 定义背景图像循环方式 396

14.5.5 定义多背景图像 398

第15章 2D变形 400

视频讲解：31分钟

15.1 认识transform 401

15.2 2D变形 402

15.2.1 旋转动画 403

15.2.2 缩放动画 404

15.2.3 移动动画 406

15.2.4 倾斜动画 408

15.2.5 变形动画 410

15.2.6 案例实战：设计涂鸦墙 412

15.3 自定义变形 414

15.4 定义复杂变形 416

第16章 设计动画 420

视频讲解：1小时20分钟

16.1 平滑过渡 421

16.1.1 定义过渡属性 421

16.1.2 定义过渡时间 422

16.1.3 定义过渡延迟时间 423

16.1.4 定义过渡效果 424

16.1.5 案例实战：设计Mac OS导航器 426

16.2 3D动画 428

16.2.1 定义动画名称 429

16.2.2 定义动画时间 429

16.2.3 定义动画播放方式 429

16.2.4 定义动画延迟时间 429

16.2.5 定义动画播放次数 430

16.2.6 定义动画播放方向 430

16.2.7 案例实战：设计翻转特效 430

16.3 渐变效果 431

16.3.1 设计Webkit渐变 432

16.3.2 Webkit案例实战 437

16.3.3 设计Gecko渐变 440

16.3.4 Gecko案例实战 446

16.3.5 设计IE渐变 447

16.3.6 设计W3C渐变 449

16.4 案例综合实战 449

16.4.1 设计礼品盒 450

16.4.2 设计折叠面板 452

16.4.3 设计易拉罐 454

16.4.4 设计光盘滑动动画 457

16.4.5 设计下拉菜单 461

16.4.6 设计精致按钮 465

第17章 网页布局 468

视频讲解：40分钟

17.1 设计多列布局 469

17.2 设置多列显示样式 471

17.2.1 定义列宽 471

17.2.2 定义列数 472

17.2.3 定义列间距 473

17.2.4 定义列边框样式 475

17.2.5 定义跨列显示 476

17.2.6 定义列高度 478

17.2.7 定义打印列 480

17.3 设计盒布局 481

17.4 设置盒布局格式 485

17.4.1 定义自适应宽度 485

17.4.2 定义列显示顺序 487

17.4.3 定义列排列方向 489

17.4.4 定义模块大小自适应 491

17.4.5 消除空白 493

17.4.6 定义对齐方式 497

17.5 综合实战：设计多列网页 498

第18章 用户界面 506

视频讲解：35分钟

18.1 改变盒模型组成方式 507

18.2 调节元素尺寸 507

18.3 设计轮廓 509

18.3.1 定义轮廓线 509

18.3.2 定义轮廓线宽度 512

18.3.3 定义轮廓线样式 512

18.3.4 定义轮廓线颜色 513

18.3.5 定义轮廓线位移 513

18.4 设计导航 516

18.4.1 定义导航顺序 516

18.4.2 定义方向键控制顺序 519

18.5 添加显示内容 521

18.6 恢复默认样式 522

18.6.1 取消元素样式 522

18.6.2 慎用initial的情况 524

第19章 CSS3其他新特性 527

视频讲解：40分钟

19.1 溢出处理 528

19.2 自定义字体类型 530

19.2.1 使用@font-face规则 530

19.2.2 开放字体 532

19.3 定义设备类型 532

19.3.1 认识Media Queries模块 532

19.3.2 认识@media规则 533

19.3.3 使用@media规则 535

19.3.4 在网站中应用@media规则 537

19.4 添加语音功能 543

19.5 设计倒影 545

本篇文章主要介绍了CSS3实现任意lowpoly动画效果实例 ，这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转
，translate移动，scale缩放

这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果 ，主要利用了CSS3 transform属性的rotate旋转
，translate移动，scale缩放 ，CSS代码部分非常简单
，唯一有趣的是 nth-of-type选择器的使用，这里UI设计师小伙伴不用望而却步 ，CSS部分完全可以拿来复用并根据自己的要求随意改变参数（所有不能复用的SVG动画代码都是耍流氓）
，然后，UI设计师再搭配上自己熟悉的AI利器 ，就可以完美的实现下面的效果了 。

分步骤拆解：

1. 低多边形风格的的制作

我的原图是下面这种：

随手从电脑上找了一张背景图
，然后借助一个神器 Image Triangulator，不得不感慨 ，这个工具真是太好用了，各位设计师需要做的只是在上打点（我是为了测试
，很粗糙的添加了顶点，如果需要得到很出彩的效果 ，需要在明暗分隔的边缘精细添加）
。

然后导出的pdf格式的文件
，就可以用AI打开了。

2. 的处理

这里在AI里需要一步重要的操作， “释放剪切蒙版
”  ，如果不进行这步操作
，生成的SVG代码里会有大量的路径裁剪遮罩标签 <clipPath> 以及polygon的clip-path属性 。

释放剪切路径后选中图形就可以看到此时已经由一个个三角形色块组成了。

导出SVG代码可以看到密密麻麻的多边形标签 <polygon fill="" points=""/>
。

Image Triangulator生成lowpoly风格的；AI处理，释放剪切蒙版

此处需注意 ，这个软件生成的PDF是带未处理的底图的
，SVG文件里有 <img> 标签，所以边缘那里可以多加几个点 ，或者截取掉一部分
，防止边缘出现镂空。

3. 在线生成的低多边形背景的处理

如果需要的仅是一个背景图，可以自定义尺寸 、颜色和晶格大小 ，支持生成SVG格式 。比如下面这种：

利用这个在线工具生成的不处理的话里面会是 <path> 路径标签，并且有描边属性
，需要在AI里处理一下，全选 ，去掉所有的描边属性
。此时
，再导出的SVG文件就是对应的多边形标签 <polygon> 了。

截止到这一步，我们的图形处理部分就已经结束了 ，剩下的是动画效果的实现

4. CSS3动画

先说一下动画实现的初步设想 。我希望这些已经生成的多边形碎片进行旋转、位移和尺寸的变化
，这对CSS来说，也是很容易实现的一个效果 ，但我需要的是散布的不同效果
，位移的方向不同，距离不同 ，缩放不同
，可我这种JavaScript渣渣又不会写随机函数，还好CSS3提供了一个强大的选择器 nth-of-type(an+b)  ，利用它，我可以赋予不同的多边形碎片不同的动画属性值
。

简单了解一下nth-of-type(an+b)
，n从0开始取值，依次加1 ，所以你会得到第a+b个
，2a+b个，3a+b个?元素。

比如 ，我希望我的 <polygon> 多边形分成6组
，每组设定不同的动画属性，我的写法如下：

polygon:nth-of-type(6n+1){transform: translate(x , y) scale() rotate();}这是顺序为6n+1（即1,7,13,19?）的多边形的动画效果 ，同理
，下一组为polygon:nth-of-type(6n+2)，即选择了第2,8,14,20?个多边形 ，依次向后推
，直到polygon:nth-of-type(6n+6)

现在附上全部的代码及注释

结合下面的全部代码说一下：

<html>

<head>

<style>

/*以下为可复用的CSS代码部分*/

.cover{

position: absolute;

width: 800px;

height: 445px;

top: 20%;

left: 20%;

z-index: 2;

}

/*cover和svg的宽高位置都重合，唯一不同的是z-index属性*/

svg {

position: absolute;

width: 800px;

height: 445px;

top: 20%;

left: 20%;

overflow: visible;

z-index: 1;

}

polygon{

transition:all 1s ease;

transform-origin: 50% 50%;

}

/*以下为设定的6组动画效果*/

.cover:hover + svg #lowpoly polygon:nth-of-type(6n+1){

transform: translate(-400% , -400%) scale(1.5) rotate(100deg);

opacity: .3

}

.cover:hover + svg #lowpoly polygon:nth-of-type(6n+2){

transform: translate(800% , -400%) scale(1.1) rotate(200deg);

opacity: .4;

}

.cover:hover + svg #lowpoly polygon:nth-of-type(6n+3){

transform: translate(-800% , 400%) scale(1.2) rotate(200deg);

opacity: .3;

}

.cover:hover + svg #lowpoly polygon:nth-of-type(6n+4){

transform: translate(-400% , 800%) scale(1.4) rotate(200deg);

opacity: .4

}

.cover:hover + svg #lowpoly polygon:nth-of-type(6n+5){

transform: translate(400% , 400%) scale(1.3) rotate(100deg);

opacity: .3

}

.cover:hover + svg #lowpoly polygon:nth-of-type(6n+6){

transform: translate(800% , 400%) scale(1.2) rotate(200deg);

opacity: .3

}

</style></head>

<body><p ></p><!--定义的触发区域-->

<svg>

<g id="lowpoly">

</g>

</svg></body></html>由于SVG在执行动画效果后碎成满屏 ，如果我们的动画要设置成鼠标移入破碎，鼠标移出复原的效果
，需要一个区域来进行动作的触发，这就是我们定义cover的意义 ，且层级属性要高于SVG属性 。

关于动画效果的触发
，我用的是 :hover 鼠标经过，需要其他触发事件可以求助前端攻城狮
。

svg的 overflow 属性一定要定义为可见 visible  ，以确动画效果后超出svg尺寸的部分可见。

关于polygon的动画属性的设定
，这种 transition:all 1s ease 表示所有的动画时间为1s，缓动效果 。 transform-origin: 50% 50% 定义了变换的原点为每个元素自己的center
。

关于6组不同的动画效果 ，我设定了位移translate
，缩放scale，选择rotate以及透明度opacity的变化。

这里X轴和Y轴的位移 ，建议自己划定一个范围
，值越大，扩散度越高 ，比如我的X和Y方向都是-800%~800% 。另外关于旋转的角度，rotate()
，为了符合物理规律，偏移的路径越远的旋转的角度更大 ，反之亦然。

如果你想设定更多的不同的效果
，只需要改nth-of-type(an+b)中n的系数a就可以了
。

如果懒得修改尝试，UI设计师在套用这个模板时 ，只需要把自己制作（或者自动生成）的 <polygon> 标签进行替换就可以。比如我们试一下把那张背景图套用进去
，就能轻松得到下面这种动画效果 。

知识点总结

1.关于低多边形lowpoly风格的制作（重点为自己制作任意图形）

2.CSS3选择器nth-of-type(an+b)的使用

关于“HTML5+CSS3从入门到精通的作品目录”这个话题的介绍，今天小编就给大家分享完了 ，如果对你有所帮助请保持对本站的关注！