本文目录

• 1.font:综合设置字体样式
• 2.CSS复合选择器（交集并集后代子代）
• 3.CSS 三大特性（层叠性继承性特殊性）
• 4.背景简写
• 5.四种定位
• 6.叠放次序（z-index）
• 7.清除浮动的四种方法
• 8.居中的n种方法
  • 8.1.普通盒子的水平居中
  • 8.2.文字的水平和垂直居中
  • 8.3.绝对定位的盒子水平和垂直居中
  • 8.4.flex方法
  • 8.5.table方法
  • 8.6.grid方法
• 9.CSS3新增选择器
  • 9.1.属性选择器
  • 9.2.伪类选择器（普通伪类、目标伪类、链接伪类）
  • 9.3.伪元素选择器
• 10.CSS3-背景缩放
• 11.CSS3-文字阴影
• 12.CSS3-盒模型
• 13.过渡transition
• 14.2D变形transform
• 15.动画 animation
• 16.动画库之animate.css
• 17.图片处理技巧之精灵图(sprite)
  • 17.1.精灵技术产生的背景
  • 17.2.精灵技术本质
  • 17.3.精灵技术的使用
  • 17.4.制作精灵图
  • 17.5.使用案例

1.font:综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，
各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），
但必须保留font-size和font-family属性，否则font属性将不起作用。

2.CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

2.1.交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
交集选择器 是 并且的意思。 即...又...的意思
比如： p.one 选择的是： 类名为 .one 的 段落标签。
用的相对来说比较少，不太建议使用。

2.2.并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号</strong>，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
并集选择器 和 的意思， 就是说，只要逗号隔开的，所有选择器都会执行后面跟着的大括号中的样式。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。

2.3.后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

2.4。子代选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

3.CSS 三大特性

层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。

3.1.CSS层叠性

所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。

3.2.CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
简单的理解就是： 子承父业。
CSS最后的执行口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。
注意：
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

• 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
• 行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
• 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
• 另外，CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

3.3.CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

权重是可以叠加的
比如的例子：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1

nav p -----> 0,1,0,1

注意：
1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

2. 继承的 权重是 0
   总结优先级：
3. 使用了 !important声明的规则。
4. 内嵌在 HTML 元素的 style属性里面的声明。
5. 使用了 ID 选择器的规则。
6. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
7. 使用了元素选择器的规则。
8. 只包含一个通用选择器的规则。
9. 同一类选择器则遵循就近原则。
   总结：权重是优先级的算法，层叠是优先级的表现

4.背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
颜色：background-color
背景：background-image
重复：background-repeat
滚动：background-attachment

位置：background-position
可以写top center left rght 等值，也可以用百分比，也可以写具体的px
如果只写一个值center，则会被解析为center center
百分比和px都是两个值，第一个值是x位置，第二个值是y位置。
背景简写示例：
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

5.四种定位

6.叠放次序（z-index）

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。
   对于普通的盒子来说，如果都是标准流，那么position：relative可提高层级，如果都有position，那么用z-index可再次提高层级。
   比如说对于一个盒子div来说，在css中的写上：

div:hover{
    position：relative；
}

意义是---->当鼠标经过的时候，该盒子的层级会高一级。
浮动float并不是真正意义上的完全脱标，例如文字和图片就不会被压住，相对定位（relative）也不是完全意义的脱标，虽然会飘起来，但是原位置仍然占有，绝对定位（absolute）是完全意义的脱标。

7.清除浮动的四种方法

其实清除浮动的方法本质叫做闭合浮动更好一些, 因为清除浮动其实就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

前置知识

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

方法1. 额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或者其他标签br等亦可。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

方法2. 父级添加overflow属性

可以通过触发BFC的方式，可以实现清除浮动效果。
通过给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，所以这种方法也不推荐使用。

方法3. 使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了
使用方法：

 .clearfix:after {  
       content: "."; 
       display: block; 
       height: 0; 
       clear: both; 
       visibility: hidden;  
  }   
 .clearfix {*zoom: 1;}   /* IE6、7 专用 */
简化版
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

优点： 使用的时候在需要清除浮动的盒子上面添加clearfix样式就可以了，符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等

方法4. 使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等

方法3和方法4都需要通过class类选择器连接所需清除浮动的父盒子，在开发中我们选用随意其中一个就可以

8.居中的n种方法

8.1.普通盒子的水平居中

margin: 0 auto;

8.2.文字的水平和垂直居中

水平居中 text-align: cneter;
垂直居中 line-height: xpx；（line-height等于父盒子的height）
行内元素和行内块元素在布局方式上等同于文字

8.3.绝对定位的盒子水平和垂直居中

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了
定位的盒子也可以水平或者垂直居中，有一个算法。

1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left: 自己的百分之五十。
3. 如果是想要垂直居中的话，可以用把left改成top就可以了。
   在不确定子盒子宽度/高度的情况下可以使用css3的transform方法：translate(-50%,-50%)位移居中元素自身宽与高的50%就能达成居中的目的。
   另外在绝对定位的情况下，还可以通过使用margin:auto来实现更骚气的水平垂直居中：
   父盒子样式

.father {
     position: relative;
     width: 300px;
     height: 150px;
     border: red solid 1px;
}

子盒子样式

.son {
     position: absolute;
     background-color: orange;
     width: 100px;
     height: 100px;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     margin: auto; 
}

8.4.flex方法

父盒子样式

display: flex; 
//垂直居中
align-items: center;
//水平居中
justify-content: center;

flex方法的一个优势就是只需要设置父盒子的样式代码就可以实现盒子内部元素的水平垂直居中

8.5.table方法

父盒子样式

display: table;

子盒子样式

display: table-cell;
//垂直居中
vertical-align: middle;
//水平居中
text-align: center;

8.6.grid方法

父盒子样式

display: grid;

子盒子样式

//垂直居中
align-self: center;
//水平居中
justify-self: center;

9.CSS3新增选择器

9.1.属性选择器

E[attr] 匹配所有具有att属性的E元素，不考虑它的值,例如： input[name]，只要有name属性的input元素都会被选中，input [name]中间带空格则代表后代选择。

input[name]{
   border:red solid 1px;
 }

E[attr = val] 匹配所有attr属性值等于val的E元素 input[id=ipt2] 属性值一般不加引号，下面的代码会把id值为ipt2的input元素的边框设置成蓝色

input[id=ipt2]{
   border:blue solid 1px;
 }

E[attr ~= val],"~"包含的意思，只要属性值包含了val的E元素都会被选中

 [title~=flower]
 {
     //title属性中包含单词 "flower" 的图片会获得黄色边框。
    border:5px solid yellow;
 }

E[attr ^= val],"^"以某个值开头的意思，只要属性值以val开头的E元素都会被选中

div[class^=test]
{
/*第三个div元素的背景会被设置成红色*/
background:red;
}

E[attr$=val],以某个值结尾的意思，只要属性值以val结尾的E元素都会被选中

<style>
div[class$=test]
{
/*第一个div的背景会被设置成蓝色*/
background:blue;
}
 </style>
 </head>
 <body>
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test_three">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>

9.2.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}

• :first-child :选取属于其父元素的首个子元素的指定选择器
• :last-child :选取属于其父元素的最后一个子元素的指定选择器
• :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
• :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
  n 可以是数字、关键词或公式

另外需要注意的是，伪元素选择器
li（没有空格）:first-child li的父盒子中的第一个li元素
li（有空格）:first-child li里面的第一个元素
ul（有空格）li:first-child ul里面的第一个li元素
li（没有空格）:nth-child（even） li的父盒子中的偶数li元素
li（没有空格）:nth-child（odd） li的父盒子中的奇数li元素
（n）全部
（2n）偶数
（2n+1）奇数
（4n）4,8,12...

目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
</body>

点击效果示意图：

点击了“跳转至内容1”.png

链接伪类选择器

• :link /* 未访问的链接 */
• :visited /* 已访问的链接 */
• :hover /* 鼠标移动到链接上 */
• :active /* 选定的链接 */

注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 lv 包包 非常 hao

a {   /* a是标签选择器  所有的链接 */
    font-weight: 700;
    font-size: 16px;
    color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

9.3.伪元素选择器

1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 文本第一行；
3. E::selection 可改变选中文本的样式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
":" 与 "::" 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
注意
伪元素::before和::after添加的内容默认是inline元素；默认的inline元素可以通过display转换为block或者是inline-block，然后可以设置height，width等样式，其实就相当于在原盒子的内部又创造出了新的盒子。**
利用伪元素插入图标字体可减少在html中放入太多杂乱无章的内容。
但实际运用中大多还是html中直接书写元素，因为伪元素存在兼容性问题。
伪元素::before和::after的厉害之处：不仅仅是个选择器，而且是个能插入元素的选择器。

10.CSS3-背景缩放

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：
（a）可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
（b）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
（c）设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

移动端为了保持图片的高清，一些图片（尤其是精灵图），会按照实际尺寸的两倍大小制作。
此时通过background-size：某个具体的值（宽度的一半，此时只写一个值，那么另外一个值默认为auto），将精灵图缩小一半，然后background里面的位置也要重新定义。（将精灵图在PS中缩小一半），最后通过background-position来调整位置。

11.CSS3-文字阴影

在css3中我们可以给我们的文字添加阴影效果了
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
前两项是必须写的。 后两项可以选写。

body {
    background-color: #ccc;
}
div {
    color: #ccc;
    font: 700 80px "微软雅黑";
}
.up {
    /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
.down {
    /* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

<div class="up">我是凸起的文字</div>
<div class="down">我是凹下的文字</div>

效果示意图如下：

效果图.png

12.CSS3-盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：
1、内加模式：box-sizing: content-box content-box:此值为其默认值，其让元素维持W3C的标准Box Mode，内加模式就是W3C盒模型（标准盒模型）

• width = content
• 一个块的宽度 = width + padding + border + margin

2、内减模式：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的，內减模式也叫做IE盒模型（怪异盒模型）

• width = border + padding + content
• 一个块的宽度 = width + margin

同样还是刚才两个div，我们给设置上相同的width，height，border，padding，但是设置不同的box-sizing，up盒子的宽高已经被撑开到了px，down盒子依旧保持200px的宽高。

.up{
    width: 200px;
    height: 200px;
    background-color: pink;
    box-sizing: content-box;
    /*  就是以前的标准盒模型  w3c */
    padding: 10px;
    border: 15px solid red;
    /* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
}
.down {
    width: 200px;
    height: 200px;
    background-color: purple;
    padding: 10px;
    box-sizing: border-box;
    /* padding border  不撑开盒子 */
    border: 15px solid red;
    /* margin: 10px; */
    /* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}

13.过渡transition

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，用逗号隔开。

如果想要所有的属性都变化过渡， 写一个all 就可以
transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始

14.2D变形transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式。
变形转换 transform transform 变换 变形的意思《 transformers 变形金刚》

14.1.移动 translate(x, y)

translate(50px,50px);

使用translate方法来将文字或图像在水平方向向右和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；

• translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
• translateX(x)仅水平方向移动（X轴移动）
• translateY(Y)仅垂直方向移动（Y轴移动）
• translate（0，-50%）等价于translateY（-50%）

14.2.缩放 scale(x, y)

transform:scale(0.8,1);

可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

• scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
• scaleX(x)元素仅水平方向缩放（X轴缩放）
• scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

14.3.旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

注意单位是 deg 度数

14.4.倾斜 skew(deg, deg)

transform:skew(30deg,0deg);

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

14.5.transform-origin

transform-origin可以调整元素转换变形的原点
如下面代码，可以改变元素原点到左上角，然后进行顺时旋转45度

div{
  transform-origin: left top;
  transform: rotate(45deg); 
 }

如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。如下代码，可以改变元素原点到x 为10px， y 为10px，然后进行顺时旋转45度

div{
  transform-origin: 10px 10px;
  transform: rotate(45deg);
}

14.6.3D变形transform

CSS3中的3D坐标系规则：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的

14.6.1.rotateX()

就是沿着 x 立体旋转.

img {
  transition:all 0.5s ease 0s;
}
img:hover {
  transform:rotateX(180deg);
}

14.6.2.rotateY()

沿着y轴进行旋转

img {
  transition:all 0.5s ease 0s;
}
img:hover {
  transform:rotateX(180deg);
}

14.6.3.rotateZ()�

沿着z轴进行旋转

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

14.7.透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

• 透视原理： 近大远小 。
• 浏览器透视：把近大远小的所有图像，透视在屏幕上。
• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
perspective:500px比较常用，数值越大，透视效果越不明显。

14.7.1.backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

backface-visibility: hidden; /* 不是正面对象屏幕，就隐藏 */

15.动画 animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

js动画与c3动画

• js是帧动画，c3是补间动画。
• 什么是帧动画：使用定时器 每隔一段时间 更改当前元素的状态
• 什么是补间动画：过渡(加过渡只要状态发生改变产出动画) 动画（多个节点来控制动画） 性能会更好
• 在支持H5C3的的浏览器尽可能使用css3动画 （移动端开发）
  语法格式：
  animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意。

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

infinite:规定动画应该无限次播放。

@keyframes mymove {
    from {
        top: 0px;
    }
    to {
        top: 200px;
    }
}
@keyframes mymove {
    0% {
        top: 0px;
    }
    25% {
        top: 200px;
    }
    50% {
        top: 100px;
    }
    75% {
        top: 200px;
    }
    100% {
        top: 0px;
    }
}

16.动画库之animate.css

animate.css的使用非常简单，因为它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上就行了。
animate官网：
https://daneden.github.io/animate.css/?
npm安装
npm install animate.css
cdn方式
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"

17.图片处理技巧之精灵图(sprite)

随便字体图标和前端框架自动化构建的普及，实战中精灵图的使用场景正变得越来越少，本处介绍主要是为了扩充知识面。

17.1.精灵技术产生的背景

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

17.2.精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图）

17.3.精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

17.4.制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。
大部分情况下，精灵图都是网页美工做。

• 1.精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。
• 2.可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
• 3.在精灵图的最底端，留一片空隙，方便我们以后添加其他精灵图。

移动端为了保持图片的高清，一些图片（尤其是精灵图），会按照实际尺寸的两倍大小制作，此时通过background-size:某个具体的值（宽度的一半，此时只写一个值，另一个值会默认为auto）将精灵图缩小一半，然后background里面的位置也要进行重新定义（具体位置可以将精灵图在PS中缩小一半进行测量得出）

注意：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。 如果是背景图片比较多，可以建议使用精灵技术。

17.5.使用案例

页面中有四个div如下

<div class="sprite aa"></div>
<div class="sprite nn"></div>
<div class="sprite dd"></div>
<div class="sprite yy"></div>

这些div都有一个共同的样式sprite

.sprite {
    display: inline-block;
    background: url(images/abcd.jpg) no-repeat;
}

然后通过调整背景图片的位置，显示对应的图片

.aa {
    width: 108px;
    height: 110px;
    background-position: 0 -9px;
}
.nn {
    width: 112px;
    height: 110px;
    background-position: -255px -276px;
}
.dd {
    width: 97px;
    height: 107px;
    background-position: -363px -8px;
}
.yy {
    width: 110px;
    height: 110px;
    background-position: -367px -556px;
}