第一章初识HTML

我们拿一篇最简单的前端页面分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 页面编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 页面编码 -->// 用户可视区域
    <title>Document</title> <!-- 页面标题 -->
    <link rel="icon" href="图片路径自行修改"> <!-- 设置页面图标，一般位.ico格式 -->
    <meta name=“description” content=“这里填写页面描述” /> <!-- 页面描述 --> /
    <meta name=“keywords” content=“这里填写关键词” /> <!--  页面关键词 -->
    <link rel="stylesheet" type="text/css" href="style.css"> <!-- 引入css文件 -->
</head>
<body>
	<header>我是头部</header>
    <footer>我是页脚</footer>
    <!-- 尾部js -->
    <script type="text/javascript" src="js/index.js"></script>
    <!-- 运行本页面的相关js命令 -->
    <script></script>
</body>
</html>

声明必须是 HTML 文档的第一行，位于 <html> 标签之前。声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
body 元素定义文档的主体, body标签是页面的主体部分，页面所有的内内容均写在这一部分。

小Tips: css的引入要放到<head></head>标签中，而js文件引入要放到页面底部，这是因为为了防止页面未加载完成dom结构而引起js报错，所以按照规范，js部分一般放到页面底部。

第二章常用的HTML标签

2.1 html5即h5 和html 有什么区别

首先，HTML5已经远远超越了标记语言的范畴，它的设计目的是在移动设备上支持多媒体，和HTML比起来，深度和广度上都做了进一步提升。即html5是html的升级版本接着，我们来看一下两者的区别：(注：本小节只做了解即可)

2.1.1 文档声明区别

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5

<!DOCTYPE html>

2.1.2 结构语义区别

html：没有体现结构语义化的标签，如：<div id="nav"></div>

html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...

相对于HTML，HTML5中新增和修改了一些元素。

2.1.3 绘图区别

HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。

HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。

2.1.4 音频和视频的支持

HTML如果不使用Flash播放器支持，它不支持音频和视频。HTML5使用和标签来支持音频和视频控制。

2.1.5 语法的处理

HTML无法处理不准确的语法；HTML5能够处理不准确的语法。

2.2 常用的html标签

本小节只介绍日常工作开发中用到的标签，没有介绍到的在我的日常开发工作中基本上用不到。

2.2.1 <div>

<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

2.2.2 列表

列表常用的有序列表无序列表，具体区别以及表现参考下图

2.2.2.1 无序列表 <ui> <li>

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

2.2.2.1 有序列表 <ol> <li>

<!DOCTYPE html>
<html>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

2.2.3 表格

涉及到表格的标签有 <table>, <thead>, <tbody>, <tr>, <td>等，具体样式以及支持的样式可以参考菜鸟教程。表格的基本用法

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

2.2.4 文章相关标签

涉及到的有<h1> -> <h6>标签，<p>标签，<span>标签，<i>， <a>标签等具体用法

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>这是p标签</p>
<span>这是span标签</span>
<i>这是i标签</i>
<a href="##">这是a链接</a>

2.2.4 图片相关<img>

2.2.5 音视频相关<video>, <audio>

2.2.6 标签
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。可以实现在一个页面中嵌入另一个网页中的内容

2.2.7 h5新添加的语义化标签 <article>, <header>, <footer>, <aside>等

在日常页面布局中，可以优先使用这些语义化标签，增加代码的可读性。

2.3 块级元素和行内元素

学习了上面这么多标签，发现在默认样式下，有的标签独占一行，有的标签会自动靠左在同一行显示。单独站一行的是块级元素，靠左在同一行显示的是行内元素。
块级元素有: <div>, <p>, <h1> -> <h>, <ul>, <li>, <table>等等等等
行内元素有：<span>, <a>, <img>, <i>等等等等
这时候有的同学会问，行内元素和块级元素可以互相转换么？答案当然是可以的，这个操作主要依靠css的display属性进行操作

display: block; // 强转为块级元素
display: inline; // 强转为行内元素
display: inline-block; // 使元素同时具备块级元素和行内元素的特征

第三章 css

3.1 样式的初始化

由于不同的浏览器内核之间，不同标签的默认样式签差万别，大部分浏览器会在<body> 标签上添加margin，这样直接来写页面的话，每用一个标签都得设置默认样式，会导致重复代码非常非常多，所以在开始一个项目的时候会添加一个默认样式的css文件，规范不同标签的默认样式，使样式在不同浏览器之间解析达到一致，最后再根据ui设计图做相关样式即可。不同的厂家有不同的默认样式处理方法，我们公司用的是normalize-css， github地址： github.com/chrisdickin…

3.2 常用样式

不可继承
margin // 外边距
padding // 内边距
width // 宽度
height // 高度
position // relative: 相对定位的元素 absolute: 绝对定位，会找第一个设置position: absolute;的元素，如果没有相对body定位， fixed：相对于浏览器窗口定位。这个属性基本上学会这三个就可以了
z-index // 设置元素显示层级，但元素得设置position才能生效，当为position: absolute时，以父级的为准
top left right bottom // 配合position使用的
display // 设置元素属性，上面讲到了强转块级和行内，下面布局部分会继续讲其他属性。
border, border-width, border-color // 边框相关，也可以单独设置某一边的边框，加上方向即可，如border-top: 1px solod #000; solod为直线， dashed为方电虚线
border-radius // 圆角
cursor // 设置鼠标指到元素上的样式，常用的有pointer，这是鼠标移动上去显示小手，做按钮时候常用。
overflow, overflow-x, overflow-y // 超出部分怎么显示，默认为auto, hidden为隐藏，scroll为滚动这几个是比较常用的

可继承
font-size // 字体大小，注意电脑最小为12px，手机可以设置更小
font-weight // 字体粗细，默认为 400 , 加粗为bold，值为600，设计有可能会设计500的
font-family // 字体这个一般会在body标签设置，全局继承，如果有不一样的单个设置
color // 颜色
box-sizing // 设置盒模型，border-box, 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 content-box, 在宽度和高度之外绘制元素的内边距和边框。一般这个属性会在body设置，子元素可以单独定制

3.3 样式书写规范

样式要尽量精简，可以写到一起的写到一起
不可继承的属性往前放，可继承的属性要往后放。

3.4 字体和单位

字体，在web设计中一般情况下会用微软雅黑作为默认字体，因为这是大部分设备都会安装的字体。
单位：
px: 像素点，这是最常用的单位
em: em是一个相对的单位，是当前元素相对于父元素字体的大小而言的；例如：父元素设置font-size: 32px ，子元素设置font-size: 1em ，那么子元素的字体大小也是32px
rem：和em类似，只不过它是以html标签上的字体大小作为相对单位。我们公司的h5分享项目中用到的就是这种方式，px单位会自动转换为rem,同时html根节点的font-size会随着页面的缩放不停设置，从而达到字体大小，元素大小随屏幕缩放自适应大小的效果。

第四章常用的布局方式

布局方式有很多，这里挑选几种特别常用的布局方式进行讲解，基本上可以覆盖在日常业务中碰到的所有场景

4.1 float浮动布局

4.1.1 浮动布局简介

浮动一般用于让块级元素排成一行在同一行显示
任何元素都可浮动，如一个元素设置为浮动元素，浮动元素无论最初是什么都会变成一个行块级元素，拥有disolay：inline-block属性float：left沿着父容器顶部向左推入容器，如果卡住推不动，判断当前位置能否全部显示该子容器，如果能完成如果不能继续找空档往里推
缺点：脱离文档流，需要清除浮动，高度塌陷（float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素）。
优点：兼容性好，计较简单容易上手
清除浮动
清除浮动是为了父级元素所在容器中的block-level box布局不产生影响所以在浮动布局情况下，让父级得适合的高度
最后在同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局浮动布局的盒子宽度在没有设定时会自适应内容宽度
实例：一个列表有6个元素，想让它个一行，排为3行
不清除浮动：

html:
<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="test"></div>
css:
.wrap {
    width: 100%;
}
.item {
    margin-bottom: 10px;
    float: left;
    width: 50%;
    height: 100px;
    background-color: black;
    opacity: 0.8;
}
.item:nth-of-type(2n + 1) {
    background-color: red;
}
.test {
    height: 200px;
    background-color: blue;
}

展示图片从这发现不清除浮动，下面的蓝色元素，会顶部开始展示，这是因为设置float的元素会脱离文档流，在页面上不再有占位符，明显与我们想想的不符合，下面我们展示清除浮动的实例

html:
<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div style="clear: both;"></div>
</div>
<div class="test"></div>
css:
.wrap {
    width: 100%;
}
.item {
    margin-bottom: 10px;
    float: left;
    width: 50%;
    height: 100px;
    background-color: black;
    opacity: 0.8;
}
.item:nth-of-type(2n + 1) {
    background-color: red;
}
.test {
    height: 200px;
    background-color: blue;
}

展示效果：发现蓝色小块已经跑到页面下方去了，达到了预期展示效果

4.1.2 浮动布局用途

基本用途，就是让两个块级元素到一行上去

4.1.3 清除浮动的几种方式

通过clear: both;实现

html:
<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div style="clear: both;"></div>
</div>
css: 
 .item {
    float: left;
    width: 100px;
    height: 100px;
    background-colr: black;
}

通过伪类元素:after实现，原理和1方式相同，只是div不需要声明了

<style>
.clearfix:after{
    /*START 真正起到清除浮动的代码*/
    content: '';
    display: block;
    clear: both;
    /*END 真正起到清除浮动的代码*/
    height:0;
}
.clearfix{display: inline-block;} /* for IE/Mac */
</style>
<div class="clearfix">
    <div style="float: left;">clear:both ;son div</div>
</div>

4.2 弹性布局 flex

暂时参考阮一峰的文档，大佬写的比我强多了 www.ruanyifeng.com/blog/2015/0…

4.3 双飞翼布局（圣杯布局）- 左侧（右侧，两侧）固定大小，中间自适应

4.3.1 用float(浮动)方式实现

html:
<div class="wrap">
    <div class="left">左侧100px</div>
    <div class="right">右侧自适应</div>
</div>
css:
.left {
    float: left;
    height: 100px;
    width: 100px;
    background-color: red;
}
.right {
    margin-left: 100px;
    height: 100px;
    background-color: blue;
}

展示效果：

4.3.2 用flex(弹性布局)方式实现

html:
<div class="wrap">
    <div class="left">左侧100px</div>
    <div class="right">右侧自适应</div>
</div>
css:
.wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.left {
    width: 100px;
    height: 100px;
    background-color: red;
}
.right {
    flex: 1;
    height: 100px;
    background-color: blue;
}

展示效果：

4.4 响应式布局

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

4.4.1 响应式布局的实现方案

(1) 用媒体查询实现

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

简单示例:

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

实战演练：在一行有4个元素的列表中，当屏幕缩小为920px时候变为一行2个，在屏幕缩小为750px的时候一行变为1个，要求布局用使用float。

html:
<div class="wrap clearfix">
    <div class="item">
        <div class=content></div>
    </div>
    <div class="item">
        <div class=content></div>
    </div>
    <div class="item">
        <div class=content></div>
    </div>
    <div class="item">
        <div class=content></div>
    </div>
    <div class="item">
        <div class=content></div>
    </div>
    <div class="item">
        <div class=content></div>
    </div>
    <div class="item">
        <div class=content></div>
    </div>
    <div class="item">
        <div class=content></div>
    </div>
</div>
css:
.wrap {
    width: 100%;
}
.clearfix {
    content: '';
    display: block;
    clear: both;
    height:0;
}
.item {
    float: left;
    padding: 10px 20px;
    width: 25%;
    box-sizing: border-box;
}
.content {
    width: 100%;
    height: 50px;
    background-color: pink;
}
@media screen and (max-width: 920px) {
    .item {
        width: 50%;
    }
}
@media screen and (max-width: 750px) {
    .item {
        width: 100%;
    }
}

正常展示页面屏幕缩放到920 屏幕缩放到750

(2) 百分比布局

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

height,width属性的百分比依托于父标签的宽高。但是，padding、border、margin等属性的情况又不一样？

子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样，子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。

子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width

border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

缺点

计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

所以，不建议用%来做响应式布局。

(3) vw/vh

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

与百分比布局很相似，但更好用。

(4) rem

上文有讲过

(5) flex弹性布局

参考阮一峰文档

(6) 利用框架栅格结构布局

比如element-ui或者bootstorm的栅格结构，就是综合利用百分比，flex弹性布局，以及float做成的组件。

4.5 居中

4.5.1 水平居中

(1) 文字水平居中一般用text-aline: center;即可实现
(2) 块级元素水平剧中用margin: 0 autio;
示例：

html:
<div class="wrap clearfix">
    <div class="item"></div>
</div>
css:
 .wrap {
    width: 100%;
}
.item {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background-color: pink;
}

效果： (3) 块级元素用定位水平居中

html:
<div class="wrap">
    <div class="item"></div>
</div>
css:
.wrap {
    position: relative;
    width: 100%;
    height: 100px;
}
.item {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -50px;
    /*  或者用以下这种方式 */
    /*  transform: translate(-50%, 0); */
    width: 100px;
    height: 100px;
    background-color: pink;
}

(4) 块级元素用flex实现水平居中

html:
<div class="wrap">
    <div class="item"></div>
</div>
css:
.wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}
.item {
    width: 100px;
    height: 100px;
    background-color: pink;
}

4.5.2 垂直居中

(1) 文字水平居中一般用line-height: 父元素高度;即可实现
(2) 块级元素垂直居中，定位方式

<div class="wrap">
    <div class="item"></div>
</div>
css:
.wrap {
  position: relative;
  height: 500px;
  width: 500px;
  background-color: blueviolet;
}
.item {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -50px;
  /*  或者用以下这种方式 */
  /*  transform: translate(0, -50%); */
  width: 100px;
  height: 100px;
  background-color: pink;
}

效果：

(3) 块级元素垂直居中，flex方式

<div class="wrap">
    <div class="item"></div>
</div>
css:
 .wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 500px;
    width: 500px;
    background-color: blueviolet;
}
.item {
    width: 100px;
    height: 100px;
    background-color: pink;
}

4.5.3 水平垂直居中

这种布局方式特别常用，比如弹窗

html:

<div class="wrap">
    <div class="item"></div>
</div>

(1) 用定位方式实现1

 .wrap {
    position: relative;
    height: 500px;
    width: 500px;
    background-color: blueviolet;
}
.item {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: pink;
}

(2) 用定位方式实现2

  .wrap {
      position: relative;
      height: 500px;
      width: 500px;
      background-color: blueviolet;
  }
  .item {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      width: 100px;
      height: 100px;
      background-color: pink;
  }

(3) 用定位方式实现3

.wrap {
    position: relative;
    height: 500px;
    width: 500px;
    background-color: blueviolet;
}
.item {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: pink;
}

(4) 用flex实现

 .wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 500px;
    width: 500px;
    background-color: blueviolet;
}
.item {
    width: 100px;
    height: 100px;
    background-color: pink;
}

4.5 瀑布流布局

瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。类似

一般这种布局方式得配合js动态计算每个节点的高度，给节点添加定位，放在最短的列的后面，做的话何以配合第三方框架，感兴趣的话可以自己手撸一个demo，这里只介绍有这种布局方式。

第五章 css动画

动画是使元素从一种样式逐渐变化为另一种样式的效果，动画包括形变，位置变化，透明度的变化等等

5.1 @keyframes 关键帧动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果，定义好后通过animation执行动画，可以指定渐变时长，渐变规则，执行次数等等。

定义动画：当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

@keyframes myfirst {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */ {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */ {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

@-o-keyframes myfirst /* Opera */ {
  0%   {background: red;}
  25%  {background: yellow;}
  50%  {background: blue;}
  100% {background: green;}
}

注： -o-, -webkit-, -moz-, 添加这些前缀是因为了兼容早期各个浏览器，新版本的浏览器已经不需要添加，使用less sass stylus等框架编译的时候会自动处理css3样式，使用这些框架的时候也是不需要处理的。

执行动画

div {
  animation-name: myfirst; // 动画名称
  animation-duration: 5s; // 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  animation-timing-function: linear; // 规定动画的速度曲线。默认是 "ease"。
  animation-delay: 2s; 规定动画何时开始。// 默认是 0。
  animation-iteration-count: infinite; // 规定动画被播放的次数。默认是 1。
  animation-direction: alternate; // 规定动画是否在下一周期逆向地播放。默认是 "normal"。
  animation-play-state: running; // 规定动画是否正在运行或暂停。默认是 "running"。
  /* Firefox: */
  -moz-animation-name: myfirst;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: linear;
  -moz-animation-delay: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-play-state: running;
  /* Safari 和 Chrome: */
  -webkit-animation-name: myfirst;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
  /* Opera: */
  -o-animation-name: myfirst;
  -o-animation-duration: 5s;
  -o-animation-timing-function: linear;
  -o-animation-delay: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-play-state: running;
}

可以简写

div {
  animation: myfirst 5s linear 2s infinite alternate;
  /* Firefox: */
  -moz-animation: myfirst 5s linear 2s infinite alternate;
  /* Safari 和 Chrome: */
  -webkit-animation: myfirst 5s linear 2s infinite alternate;
  /* Opera: */
  -o-animation: myfirst 5s linear 2s infinite alternate;
}

5.2 transition 过渡动画

transition的作用在于，指定状态变化所需要的时间。

例如：鼠标放在图片上，图片宽高变大，指定执行时间为1s

img{
    height:15px;
    width:15px;
    transition: 1s;
}

img:hover{
    height: 450px;
    width: 450px;
}

我们还可以指定transition适用的属性，比如只适用于height。

img{
    transition: 1s height;
}

在同一行transition语句中，可以分别指定多个属性。

img{
    transition: 1s height, 1s width;
}

但是，这样一来，height和width的变化是同时进行的，跟不指定它们没有差别。可以用transition-delay 来添加延迟

img{
    transition: 1s height, 1s 1s width;
}

上面代码指定，width在1秒之后，再开始变化，也就是延迟（delay）1秒

同时可以设置transition-timing-function 来表示动画执行过程渐变方式

img{
    transition: 1s ease;
}

除了ease以外，其他模式还包括
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式，链接直达

自定义示例：

img{
    transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}

总结：transition的完整写法如下。

img{
    transition: 1s 1s height ease;
}

拆分

img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

注意：transition的优点在于简单易用，但是它有几个很大的局限。

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

5.3 transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 transform 常用的属性有

none: 定义不进行转换。
translate(x,y): xy轴平移。
translate3d(x,y,z): xyz轴平移。
translateX(x): x轴平移。
translateY(y): y轴平移。
translateZ(z): z轴平移。
scale(x,y) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z): 缩放。
rotate(angle): 沿着中心点旋转。单位deg
rotate3d(x,y,z,angle): 3d旋转。
rotateX(angle): 沿着x轴旋转。
rotateY(angle): 沿着y轴旋转。
rotateZ(angle): 沿着z轴旋转。

transform属性常常配合transition属性一起使用，达到简单动画的效果

例如

div {
	width: 10px;
    height: 10px;
    background-color: red;
    transition: all 0.4s; // 全部属性变化，0.4s完成
}
div:hover {
   rotate(90deg); // 旋转90°
}

5.4 常用的动画框架

纯css动画库我常用animate.css，这里面封装了很多动画效果官网

页面加载过程执行的动画插件我常用wow.js npm仓库地址

进击的小白前端攻略

第一章 初识HTML

第二章 常用的HTML标签