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

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

一、动画

1、创建动画

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

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

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

animation-duration ：动画的耗时

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

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

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

  1. @keyframes moveTest {
  2.   /*百分比是指整个动画耗时的百分比*/
  3.   0% {
  4.     transform: translate(0px, 0px);
  5.   }
  6.   50% {
  7.     transform: translateY(200px);
  8.   }
  9.   100% {
  10.     transform: translate(200px,200px);
  11.   }
  12. }

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

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: blue;
  12.             animation-name: moveTest;
  13.             animation-duration: 2s;
  14.         }
  16.         @keyframes moveTest {
  17.             0% {
  18.                 transform: translate(0px, 0px);
  19.             }
  20.             50% {
  21.                 transform: translateY(200px);
  22.             }
  23.             100% {
  24.                 transform: translate(200px,200px);
  25.             }
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div></div>
  31. </body>
  32. </html>

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

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

2、动画的其他属性

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

animation-direction：设置交替动画

animation-delay：设置动画的延迟

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

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

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

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

3、案例：无缝滚动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         div {
  12.             width: 600px;
  13.             height: 100px;
  14.             margin: 100px auto;
  15.             background-color: #ccc;
  16.             overflow: hidden;
  17.         }
  18.         ul {
  19.             width: 200%;
  20.             animation: moveLeft 6s linear 0s infinite;
  21.         }
  22.         ul > li {
  23.             float: left;
  24.             list-style: none;
  25.         }
  26.         li > img {
  27.             width: 200px;
  28.             height: 100px;
  29.         }
  30.         div:hover > ul {
  31.             cursor: pointer;
  32.             animation-play-state: paused;
  33.         }
  34.         @keyframes moveLeft {
  35.             from {
  36.                 transform: translateX(0);
  37.             }
  38.             to {
  39.                 transform: translateX(-600px);
  40.             }
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div>
  46.         <ul>
  47.             <li><img src="images/img1.jpg" alt=""></li>
  48.             <li><img src="images/img2.jpg" alt=""></li>
  49.             <li><img src="images/img3.jpg" alt=""></li>
  50.           	<!-- 复制的一份图片 -->
  51.             <li><img src="images/img1.jpg" alt=""></li>
  52.             <li><img src="images/img2.jpg" alt=""></li>
  53.             <li><img src="images/img3.jpg" alt=""></li>
  54.         </ul>
  55.     </div>
  56. </body>
  57. </html>

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

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

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

4、案例：时钟

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .clock {
  12.             width: 300px;
  13.             height: 300px;
  14.             margin: 100px auto;
  15.             border: 10px solid #ccc;
  16.             border-radius: 50%;
  17.             position: relative;
  18.         }
  19.         .line {
  20.             width: 8px;
  21.             height: 300px;
  22.             background-color: #ccc;
  23.             position: absolute;
  24.             left: 50%;
  25.             top: 50%;
  26.             transform: translate(-50%, -50%);
  27.         }
  28.         .line2 {
  29.             transform: translate(-50%, -50%) rotate(30deg);
  30.         }
  31.         .line3 {
  32.             transform: translate(-50%, -50%) rotate(60deg);
  33.         }
  34.         .line4 {
  35.             width: 10px;
  36.             transform: translate(-50%, -50%) rotate(90deg);
  37.         }
  38.         .line5 {
  39.             transform: translate(-50%, -50%) rotate(120deg);
  40.         }
  41.         .line6 {
  42.             transform: translate(-50%, -50%) rotate(150deg);
  43.         }
  44.         .cover {
  45.             width: 250px;
  46.             height: 250px;
  47.             background-color: #fff;
  48.             border-radius: 50%;
  49.             position: absolute;
  50.             left: 50%;
  51.             top: 50%;
  52.             transform: translate(-50%, -50%);
  53.         }
  54.         .center {
  55.             width: 20px;
  56.             height: 20px;
  57.             background-color: #ccc;
  58.             border-radius: 50%;
  59.             position: absolute;
  60.             left: 50%;
  61.             top: 50%;
  62.             transform: translate(-50%, -50%);
  63.         }
  64.         .hour {
  65.             width: 12px;
  66.             height: 80px;
  67.             background-color: red;
  68.             position: absolute;
  69.             left: 50%;
  70.             top: 50%;
  71.             transform: translate(-50%, -100%);
  72.             transform-origin: center bottom;
  73.             animation: clockMove 43200s linear infinite;
  74.         }
  75.         .minute {
  76.             width: 8px;
  77.             height: 100px;
  78.             background-color: blue;
  79.             position: absolute;
  80.             left: 50%;
  81.             top: 50%;
  82.             transform: translate(-50%, -100%);
  83.             transform-origin: center bottom;
  84.             animation: clockMove 3600s linear infinite;
  85.         }
  86.         .second {
  87.             width: 4px;
  88.             height: 120px;
  89.             background-color: green;
  90.             position: absolute;
  91.             left: 50%;
  92.             top: 50%;
  93.             transform: translate(-50%, -100%);
  94.             transform-origin: center bottom;
  95.             animation: clockMove 60s infinite steps(60);
  96.         }
  98.         @keyframes clockMove {
  99.             from {
  100.                 transform: translate(-50%, -100%) rotate(0deg);
  101.             }
  102.             to {
  103.                 transform: translate(-50%, -100%) rotate(360deg);
  104.             }
  105.         }
  106.     </style>
  107. </head>
  108. <body>
  109.     <div class="clock">
  110.         <div class="line line1"></div>
  111.         <div class="line line2"></div>
  112.         <div class="line line3"></div>
  113.         <div class="line line4"></div>
  114.         <div class="line line5"></div>
  115.         <div class="line line6"></div>
  116.         <div class="cover"></div>
  117.         <div class="hour"></div>
  118.         <div class="minute"></div>
  119.         <div class="second"></div>
  120.         <div class="center"></div>
  121.     </div>
  122. </body>
  123. </html>

我们让秒针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 字体。

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

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

4、字体图标

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

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

优点：

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

4.1、方法一

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

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         @font-face {
  8.             font-family: 'iconfont';
  9.             src: url('../fonts/iconfont.eot'); /* IE9*/
  10.             src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  11.             url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
  12.             url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  13.             url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  14.         }
  15.         .myFont{
  16.             font-family: iconfont;
  17.         }
  18.         /*笑脸*/
  19.         .smile::before{
  20.             content: "\e641";
  21.             color: red;
  22.             font-size: 50px;
  23.         }
  24.         /*输出*/
  25.         .output::before{
  26.             content: "\e640";
  27.             color: blue;
  28.             font-size: 50px;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33. <!--使用字体图标的时候，得自己指定你想使用的图片-->
  34. <span class="myFont smile"></span>
  35. <span class="myFont output"></span>
  36. <span class="myFont"></span>
  37. </body>
  38. </html>

4.2、方法二

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

  1. <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/）找到对应的图标的名称即可。

示例：

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

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

从零开始学 Web 之 CSS3（六）动画animation，Web字体的更多相关文章

  1. CSS3(4)---动画(animation)

    CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...

  2. 从零开始学 Java - 利用 Nginx 负载均衡实现 Web 服务器更新不影响访问

    还记得那些美妙的夜晚吗 你洗洗打算看一个小电影就睡了,这个时候突然想起来今天晚上是服务器更新的日子,你要在凌晨时分去把最新的代码更新到服务器,以保证明天大家一觉醒来打开网站,发现昨天的 Bug 都不见 ...

  3. CSS3之动画Animation特效

    CSS3的出现 让我们通过css样式也能写出炫酷的特效 通过 Animation 这个属性 无需插件和jquery也可以轻松的完成简单的动画效果 DEMO: <!DOCTYPE html> ...

  4. css3中动画animation的应用

    <!DOCTYPE html> <html> <head> <style> /* @-webkit-keyframes anim1 { // 规定动画. ...

  5. 《从零开始学Swift》学习笔记(Day2)——使用Web网站编写Swift代码

    Swift 2.0学习笔记——使用Web网站编写Swift代码 原创文章,欢迎转载.转载请注明:关东升的博客 Swift程序不能在Windows其他平台编译和运行,有人提供了一个网站swiftstub ...

  6. 从零开始学ios开发（六）：IOS控件（3），Segmented Control、Switch

    这次的学习还是基于上一个项目继续进行(你也可以新建一个项目)学习Segmented Control和Switch. Segmented Control Switch Segmented Control ...

  7. 从零开始学安全(四十六)●sqli-labs 1-4关 涉及的知识点

    Less-1 到Less-4  基础知识注入 我们可以在 http://127.0.0.1/sqllib/Less-1/?id=1 后面直接添加一个 ‘ ,来看一下效果: 从上述错误当中,我们可以看到 ...

  8. 从零开始学安全(三十六)●利用python 爆破form表单

    import sys import requests from requests.auth import HTTPBasicAuth def Brute_Force_Web(postData): re ...

  9. 从零开始学安全(二十六)●利用Nmap目标的本版进行探测

    通过对对方电脑的服务探测 对本版较低的服务 或者无补丁的服务 可以直入侵 版本探测 version  后边就是版本

  10. 从零开始学Electron笔记（六）

    在之前的文章我们介绍了一下Electron如何通过链接打开浏览器和嵌入网页,接下来我们继续说一下Electron中的对话框 Dialog和消息通知 Notification. 在之前的文章中其实我们是 ...

随机推荐

  1. entity framework core 生成 postgresql 数据库实体

    .net core 2.0 使用db first 方式生成 表 和context PM 控制台运行命令出错 Scaffold-DbContext "Host=localhost;Databa ...

  2. 删除centos7中自带有python2.7

    删除centos7中自带有python2. ()强制删除已安装python及其关联 # rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps ...

  3. win10系统配置jdk环境不能用%JAVA_HOME% 代替目录

    发现以前配好的java环境变量和tomcat环境变量全都清空了,在重新配置的时候总是出现问题,即在cmd命令窗口下,输入java,显示正常,输入java -version 也是显示正常,唯独输入jav ...

  4. python基础之Day8

    一.什么是文件 文件是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位 文件的操作核心就:读.写 即我们只需要对于进行读写操作,就是对操作系统发起请求,然后由操作系统将用户或者应用程序对文件的读写 ...

  5. Django的内置登录、退出、修改密码方法

    Django中内置的登录.退出.修改密码方法. 1.url.py中使用django.contrib.auth中的views函数,django.views.generic中的TemplateView函数 ...

  6. c++11 线程池学习笔记 (一) 任务队列

    学习内容来自一下地址 http://www.cnblogs.com/qicosmos/p/4772486.html github https://github.com/qicosmos/cosmos ...

  7. c++11 线程池学习笔记 (二) 线程池

    学习内容来自以下地址 http://www.cnblogs.com/qicosmos/p/4772486.html github https://github.com/qicosmos/cosmos ...

  8. 移动端web轮播图插件swiper，功能很强大

    使用方法示例: <div class="swiper-container"> <div class="swiper-wrapper"> ...

  9. drf7 分页组件

    DRF的分页 数据库有几千万条数据,这些数据需要展示,不可能直接从数据库把数据全部读取出来, 这样会给内存造成特别大的压力,有可能还会内存溢出,所以希望一点一点的取,那展示的时候也是一样的,总是要进行 ...

  10. TensorFlow 计算模型 -- 计算图

    TensorFlow是一个通过计算图的形式表述计算机的编程系统 TensorFlow程序一般分为两个阶段,第一个阶段需要定义计算图中所有的计算(变量) 第二个阶段为执行计算 如以下代码 import ...