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

阅读量：5227 次

发布时间：2019-06-14

本文共 4161 字，大约阅读时间需要 13 分钟。

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

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

微信公众号：

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

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

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

一、动画

1、创建动画

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

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

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

animation-duration ：动画的耗时

animation-name: moveTest;animation-duration: 2s;

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

使用 @keyframes关键字来创建动画。

@keyframes moveTest {  /*百分比是指整个动画耗时的百分比*/  0% {    transform: translate(0px, 0px);  }  50% {    transform: translateY(200px);  }  100% {    transform: translate(200px,200px);  }}

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

示例：

    
        Document

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

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

2、动画的其他属性

animation-iteration-count：设置动画的播放次数，默认为1次

animation-direction：设置交替动画

animation-delay：设置动画的延迟

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

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

animation-play-state：设置动画的播放状态 paused:暂停 running:播放

/*3.设置动画的播放次数，默认为1次  可以指定具体的数值，也可以指定infinite(无限次)*/animation-iteration-count: 1;/*4.设置交替动画  alternate:来回交替*/animation-direction: alternate;/*5.设置动画的延迟*/animation-delay: 2s;/*5.设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态forwards:会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态backwards:不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态both:会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态*/animation-fill-mode: both;/*6.动画的时间函数:linear,ease...*/animation-timing-function: linear;/*设置动画的播放状态  paused:暂停   running:播放*/animation-play-state: running;

3、案例：无缝滚动

    
        Document

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

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

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

4、案例：时钟

    
        Document

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

二、Web字体与图标

1、web字体

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

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

2、字体格式

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

TureTpe(.ttf)格式

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

OpenType(.otf)格式

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

Web Open Font Format(.woff)格式

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

Embedded Open Type(.eot)格式

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

SVG(.svg)格式

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

3、使用步骤

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

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

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

@font-face {  font-family: 'shuangyuan';  src: url('../fonts/webfont.eot'); /* IE9*/  src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */    url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */    url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/    url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */}

最后在使用的时候：font-family: "shuangyuan"; 就可以使用 shuangyuan 这种字体了。