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

时间 2019-11-14

标签开始 web css3 css 动画 animation 字体栏目 HTML 繁體版

原文原文链接

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

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

微信公众号：Web前端之巅

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

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

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

1、动画

一、建立动画

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

一个动画至少须要两个属性：前端

animation-name ：动画的名字（建立动画时起的名字，以下为 moveTest）java

animation-duration ：动画的耗时git

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

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

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

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

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

示例：浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;

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

        @keyframes moveTest {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translateY(200px);
            }
            100% {
                transform: translate(200px,200px);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

0%：动画起始位置，也能够写成 from

100%：动画终点位置，也能够写成 to。

二、动画的其余属性

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;

三、案例：无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 600px;
            height: 100px;
            margin: 100px auto;
            background-color: #ccc;
            overflow: hidden;
        }
        ul {
            width: 200%;
            animation: moveLeft 6s linear 0s infinite;
        }
        ul > li {
            float: left;
            list-style: none;
        }
        li > img {
            width: 200px;
            height: 100px;
        }
        div:hover > ul {
            cursor: pointer;
            animation-play-state: paused;
        }
        @keyframes moveLeft {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-600px);
            }
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <!-- 复制的一份图片 -->
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

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

二、而后让 ul 移动整个ul的宽度便可，而且无限循环，就实现无线轮播的效果。

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

四、案例：时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .clock {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 10px solid #ccc;
            border-radius: 50%;
            position: relative;
        }
        .line {
            width: 8px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .line2 {
            transform: translate(-50%, -50%) rotate(30deg);
        }
        .line3 {
            transform: translate(-50%, -50%) rotate(60deg);
        }
        .line4 {
            width: 10px;
            transform: translate(-50%, -50%) rotate(90deg);
        }
        .line5 {
            transform: translate(-50%, -50%) rotate(120deg);
        }
        .line6 {
            transform: translate(-50%, -50%) rotate(150deg);
        }
        .cover {
            width: 250px;
            height: 250px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .center {
            width: 20px;
            height: 20px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .hour {
            width: 12px;
            height: 80px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockMove 43200s linear infinite;
        }
        .minute {
            width: 8px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockMove 3600s linear infinite;
        }
        .second {
            width: 4px;
            height: 120px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -100%);
            transform-origin: center bottom;
            animation: clockMove 60s infinite steps(60);
        }
        
        @keyframes clockMove {
            from {
                transform: translate(-50%, -100%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -100%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="clock">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>    
        <div class="cover"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="center"></div>
    </div>
</body>
</html>

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

2、Web字体与图标

一、web字体

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

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

二、字体格式

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

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+

三、使用步骤

须要注意的是，咱们在使用 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 这种字体了。

四、字体图标

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

常见的是把网页经常使用的一些小的图标，借助工具帮咱们生成一个字体包，而后就能够像使用文字同样使用图标了。

优势：

将全部图标打包成字体库，减小请求；
具备矢量性，可保证清晰度；
使用灵活，便于维护

4.一、方法一

使用方法和Web字体同样。也是先下载须要的图标字体库文件，而后使用关键字 @font-face 生成本身的web图标字体。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('../fonts/iconfont.eot'); /* IE9*/
            src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
            url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .myFont{
            font-family: iconfont;
        }
        /*笑脸*/
        .smile::before{
            content: "\e641";
            color: red;
            font-size: 50px;
        }
        /*输出*/
        .output::before{
            content: "\e640";
            color: blue;
            font-size: 50px;
        }
    </style>
</head>
<body>
<!--使用字体图标的时候，得本身指定你想使用的图片-->
<span class="myFont smile"></span>
<span class="myFont output"></span>
<span class="myFont">&#xe642;</span>
</body>
</html>

4.二、方法二

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

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">

使用的时候：和方法一同样，直接使用类属性 class='fa fa-play 的方式，fa-play是一个播放的图标，不一样的图标的名字含义不一样，只须要到 font-awesome 官网（http://www.fontawesome.com.cn/）找到对应的图标的名称便可。

示例：

<a href="javascript:void(0);" class="fa fa-play"></a>  <!--播放图标-->
<a href="javascript:void(0);" class="fa fa-arrows-alt"></a>   <!--全屏图标-->

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