从零开始学 Web之CSS3（六）动画 animation，Web字体

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、动画

1、创建动画

好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。

一个动画至少需要两个属性：

：动画的名字（创建动画时起的名字，如下为 moveTest）

：动画的耗时

如需在 CSS3 中创建动画，需要学习 规则。 规则用于创建动画。在 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

使用 关键字来创建动画。

其中，百分比是指整个动画耗时的百分比。

示例：

：动画起始位置，也可以写成 from

：动画终点位置，也可以写成 to。

2、动画的其他属性

：设置动画的播放次数，默认为1次

：设置交替动画

：设置动画的延迟

：设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态

：动画的时间函数（动画的效果，平滑？先快后慢等）

：设置动画的播放状态 paused:暂停 running:播放

3、案例：无缝滚动

1、将要显示的图片复制一份，以完成无缝滚动的需求。

2、然后让 ul 移动整个ul的宽度即可，并且无限循环，就实现无线轮播的效果。

3、然后在鼠标放上去的时候，使得动画暂停。

4、案例：时钟

我们让秒针step(60)一步一步走，效果更好。

二、Web字体与图标

1、web字体

我们有些时候需要在网页上显示一些特殊的字体，如果这些特殊的字体在电脑上没有安装的话，就会显示系统默认的字体，而不是这些特殊的字体。

这时就有了 Web 字体。开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至 IE 低版本浏览器也能支持。

2、字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+

3、使用步骤

需要注意的是，我们在使用 Web 字体的时候，应该首先把需要用到特殊字体的这些字写好，然后在网络上生成这些字体对应的 Web 字体库，并将其下载下来。下图为一个网站生成和下载web字体的网站，点击立即使用就可以了：

下载下来之后，把下在下来的所有文件导入自己的项目，注意路径的匹配问题。

之后在我们css样式里面使用关键字来自定义 Web 字体。

最后在使用的时候： 就可以使用 shuangyuan 这种字体了。

4、字体图标

字体图标就是我们常见的字体，不过这个字体的表现形式为一个图标。这样我们就可以使用这些特殊的字体来代替精灵图了。

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。

优点：

将所有图标打包成字体库，减少请求；

具有矢量性，可保证清晰度；

使用灵活，便于维护

4.1、方法一

使用方法和Web字体一样。也是先下载需要的图标字体库文件，然后使用关键字 生成自己的web图标字体。

示例：

4.2、方法二

直接在线调用网上web图标 css库

示例：

注意：class 样式的 第一个 fa 是必写的，表示的是用的 font-awesome 的字体图标。