CSS3学习

1、在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

2、圆角效果 border-radius ：向元素添加圆角边框

使用方法：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

div{ height:50px;/*是width的一半*/  width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/  }

实心圆：
方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。

div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }

3、阴影 box-shadow：向盒子添加阴影。支持添加一个或者多个。

语法：box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

参数说明：

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

添加多个阴影：只需用逗号隔开即可。

.box_shadow{box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}

效果：

阴影模糊半径与阴影扩展半径的区别：

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

X轴偏移量和Y轴偏移量值可以设置为负数，负值时，阴影在负半轴方向。

4、为边框应用图片 border-image：为边框应用背景图片，它和我们常用的background属性比较相似

语法：

repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复

Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）

Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远

注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。

Firefox 26.0 下是可以准确区分的。

5、颜色之RGBA

RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

语法：color：rgba(R,G,B,A)
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。
代码示例：
background-color:rgba(100,120,60,0.5);

6、渐变色彩 
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

参数：第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：

第一个参数省略时，默认为“180deg”，等同于“to bottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
效果图：

7、text-overflow 

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

语法：

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }

8、word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

语法：

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

9、嵌入字体@font-face：能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。

语法：

@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。

p {
    font-size :12px;
    font-family : "My Font";
    /*必须项，设置@font-face中font-family同样的值*/
}

例如：

@font-face {
    font-family: "MOOC Font";
    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.demo {
    width: 340px;
    padding: 30px;    
    color: #566F89;
    background: #000;
    font-size:58px;
    font-family: "MOOC Font";
}

10、文本阴影text-shadow

语法：text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；      

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

11、background-origin ： 设置元素背景图片的原始起始位置。

语法：background-origin ： border-box | padding-box | content-box;

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

12、background-clip 用来将背景图片做适当的裁剪以适应实际需要

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

13、background-size ： 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止

14、multiple backgrounds

多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

语法：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

15制作导航栏分割线：渐变与伪符号

/*使用伪元素制作导航列表项分隔线*/
.nav li:after{
    background-image:linear-gradient(to bottom,#f65f57,#B34439,#f65f57);
    content:"";
    width:1px;
   height:20px;
    position:absolute;
    right:1px;
    top:50%;
    margin-top:-10px;
}
 /*删除最后一项导航分隔线*/
.nav li:last-child:after{
    background-image:none;
}

16属性选择器

e.g.：

<style type="text/css">

a[class^='column']{background-color:red;}
a[href$='.doc']{background-color:green;}
a[title*='box']{
    background:blue;
}
</style>
</head> 
<body>
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>
</body>

17、结构性伪类选择器—root

匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

e.g.:通过“:root”选择器设置背景颜色

“:root”选择器等同于<html>元素，简单点说：
:root{background:orange}
html {background:orange;}
得到的效果等同。
建议使用:root方法。
另外在IE９以下还可以借助“:root”实现hack功能。

18、结构性伪类选择器—not

称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

e.g.：除页脚”div#footer”之外的所有div设置橙色背景色

div:not([id="footer"]){background: orange;}

19:、结构性伪类选择器—empty

选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

<div>我这里有内容</div>
<div> <!-- 我这里有一个空格 --></div>
<div></div><!-- 我这里任何内容都没有 -->

div:empty {border: 1px solid green;}

20、结构性伪类选择器—target

称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

HTML代码：
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">content for Brand</div>
CSS代码：
.menuSection{display: none;}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}

分析：
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand
2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。
多个url（多个target）处理：
就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。

21、结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

22、结构性伪类选择器—last-child

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。

23、结构性伪类选择器—nth-child(n)   :nth-last-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

e.g.：ol > li:nth-child(even){background: green;}

:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

24、“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

25、“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

26、“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

27、“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

28、“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

29、“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

30、在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

31、在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

32、opacity 属性 设置不透明度

33、相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

34、“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：

从上图中可以看出，用鼠标选中“专注IT、互联网技术”、“纯干货、学以致用”、“没错、这是免费的”这三行文本中，默认显示样式为：蓝色背景、白色文本。
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
2、Firefox 支持替代的 ::-moz-selection。

35、“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

Firefox 支持：-moz-read-only

36、“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

Firefox 支持：-moz-read-write

37、

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

38、DIV+CSS的浮动清除

当元素有浮动属性时，会对其父元素或后面的元素产生影响，
会出现一个布局错乱的现象，可以通过清除浮动的方法来解决浮动的影响。
浮动的清理(clear):
值:
none:默认值。允许两边都可以有浮动对象；
left:不允许左边有浮动对象；
right:不允许右边有浮动对象；
both:左右两侧不允许有浮动对象。
清除浮动的方法：
1.额外标签法
这种方法应该是最简单的一种了，w3c建议在容器的末尾增加一个“clear:both"的元素
强迫容器适应它的高度以便装下所有的float元素。
<div id="main">
   <div id="left"></div>
   <div id="right"></div>
   <div class="clear"></div>
</div>
<div id="footer"></div>

.clear{clear:both;}

2.父元素添加overflow:hidden;
注：如果子元素使用了定位布局，就会很难实现。

3.利用伪对象after方法
定义一个类，使用伪对象after,控制浮动元素的影响。
网上最流行的清除浮动代码：
.clearFix:after{
 clear:both;
 display:block;
 visibility:hidden;
 height:0;
 line-height:0;
 content:'';
}
.clearFix{zoom:1;} /*解决ie6/7兼容问题*/

css溢出的使用
设置对象的内容超过其指定高度及宽度时，如何管理内容。
overflow:visible【默认值，不剪切内容也不添加滚动条】
auto【在必需时，对象内容才会被剪切或添加滚动条】
hidden【不显示超过对象尺寸的内容】
scroll【总是显示滚动条】

zoom属性：只有ie内核的浏览器支持，缩放比例。
设置或检索对象的缩放比例。
语法：normal【默认值，使用对象的实际尺寸】；number【百分数|无符号浮点实数。浮点实数
为1.0或百分数为100%时相当于此属性的normal值
zoom:1解决ie6高度自适应问题。

39、变形--旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

.wrapper {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  border: 2px dotted blue;
}

.wrapper div{
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: green;
  color: #fff;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  transform:rotate(-20deg);
}
.wrapper span {
  display:block;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
  transform:rotate(20deg);
 }

40、变形--扭曲 skew()

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

Skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

41、变形--缩放 scale()

缩放 scale()函数 让元素根据中心原点对对象进行缩放。

缩放 scale 具有三种情况：
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

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

42、变形--位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况：
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

e.g.：让不知道宽度和高度的元素实现水平、垂直居中。

<body>
<div class="wrapper">
我不知道我的宽度和高是多少，我要实现水平垂直居中    
</div>
</body>

.wrapper {
  padding: 20px;
  background:orange;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 5px;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

43、变形--矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。

44、变形--原点 transform-origin

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取值类似，如下表所示：

45、动画--过渡属性 transition-property

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

• transition-property:指定过渡或动态模拟的CSS属性
• transition-duration:指定完成过渡所需的时间
• transition-timing-function:指定过渡函数
• transition-delay:指定开始出现的延迟时间

1）transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

2）

practice:

<!DOCTYPE HTML>
<htmllang="en-US">
    <head>
        <meta charset="UTF-8">
    <title>CSS3 Full Background Slider </title>
        <style type="text/css">
            @importurl("http://www.w3cplus.com/demo/css3/base.css");
            @importurl("http://fonts.googleapis.com/css?family=Yesteryear");
            html,body {
            height: 100%;
            }
            /*设置背景图片全屏显示，并且居中*/
            img.bg {
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto !important;
            height: 100%;
            position: fixed;
            top: 0;
            left: 50%;
            z-index:1;
              -webkit-transform: translateX(-50%);
              -moz-transform: translateX(-50%);
              -o-transform: translateX(-50%);
              -ms-transform: translateX(-50%);
            }
            /*设置背景图片从左向右移入显示的动画效果*/
            /* Slide Left */
            
            @-webkit-keyframes 'slideLeft' {
            0% { left: -500px; }
            100% { left: 0; }
            }
            @-moz-keyframes 'slideLeft' {
            0% { left: -500px; }
            100% { left: 0; }
            }
            @-o-keyframes 'slideLeft' {
            0% { left: -500px; }
            100% { left: 0; }
            }
            @-ms-keyframes 'slideLeft' {
            0% { left: -500px; }
            100% { left: 0; }
            }
            @keyframes 'slideLeft' {
            0% { left: -500px; }
            100% { left: 0; }
            }
            /*设置背景图像从底部向顶部移入的动画效果*/
             /* Slide Bottom */
            
            @-webkit-keyframes 'slideBottom' {
            0% { top: 350px; }
            100% { top: 0; }
            }
            @-moz-keyframes 'slideBottom' {
            0% { top: 350px; }
            100% { top: 0; }
            }
            @-ms-keyframes 'slideBottom' {
            0% { top: 350px; }
            100% { top: 0; }
            }
            @-o-keyframes 'slideBottom' {
            0% { top: 350px; }
            100% { top: 0; }
            }
            @keyframes 'slideBottom' {
            0% { top: 350px; }
            100% { top: 0; }
            }
            /*设置背景图片由小到大放大动画效果*/
            /* Zoom In */
            
            @-webkit-keyframes 'zoomIn' {
            0% { -webkit-transform: scale(0.1); }
            100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'zoomIn' {
            0% { -moz-transform: scale(0.1); }
            100% { -moz-transform: none; }
            }
            @-ms-keyframes 'zoomIn' {
            0% { -ms-transform: scale(0.1); }
            100% { -ms-transform: none; }
            }
            @-o-keyframes 'zoomIn' {
            0% { -o-transform: scale(0.1); }
            100% { -o-transform: none; }
            }
            @keyframes 'zoomIn' {
            0% { transform: scale(0.1); }
            100% { transform: none; }
            }
            /*设置背景图像由大到小缩小动画效果*/
            /* Zoom Out */
            
            @-webkit-keyframes 'zoomOut' {
            0% { -webkit-transform: scale(2); }
            100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'zoomOut' {
            0% { -moz-transform: scale(2); }
            100% { -moz-transform: none; }
            }
            @-ms-keyframes 'zoomOut' {
            0% { -ms-transform: scale(2); }
            100% { -ms-transform: none; }
            }
            @-o-keyframes 'zoomOut' {
            0% { -o-transform: scale(2); }
            100% { -o-transform: none; }
            }
            @keyframes 'zoomOut' {
            0% { transform: scale(2); }
            100% { transform: none; }
            }
            /*背景图像旋转出现动画效果*/
            /* Rotate */
            
            @-webkit-keyframes 'rotate' {
            0% { -webkit-transform: rotate(-360deg) scale(0.1); }
            100% { -webkit-transform: none; }
            }
            @-moz-keyframes 'rotate' {
            0% { -moz-transform: rotate(-360deg) scale(0.1); }
            100% { -moz-transform: none; }
            }
            @-ms-keyframes 'rotate' {
            0% { -ms-transform: rotate(-360deg) scale(0.1); }
            100% { -ms-transform: none; }
            }
            @-o-keyframes 'rotate' {
            0% { -o-transform: rotate(-360deg) scale(0.1); }
            100% { -o-transform: none; }
            }
            @keyframes 'rotate' {
            0% { transform: rotate(-360deg) scale(0.1); }
            100% { transform: none; }
            }
            /*设置背景图像不显示动画效果*/
            @-webkit-keyframes 'notTarget' {
            0% { z-index: 75; }
            100% { z-index: 75; }
            }
            @-moz-keyframes 'notTarget' {
            0% { z-index: 75; }
            100% { z-index: 75; }
            }
            @-ms-keyframes 'notTarget' {
            0% { z-index: 75; }
            100% { z-index: 75; }
            }
            @-o-keyframes 'notTarget' {
            0% { z-index: 75; }
            100% { z-index: 75; }
            }
            @keyframes 'notTarget' {
            0% { z-index: 75; }
            100% { z-index: 75; }
            }
            
            
            
            .slider {
            position: absolute;
            width: 100%;
            text-align: center;
            z-index: 9999;
            bottom: 100px;
            }
            .slider li {
            display: inline-block;
            width: 170px;
            height: 130px;
            margin-right: 15px;
            }
            .slider a {
            display: inline-block;
            width: 170px;
            padding-top: 70px;
            padding-bottom: 20px;
            position: relative;
            cursor: pointer;
            border: 2px solid #fff;
            border-radius: 5px;
            vertical-align: top;
            color: #fff;
            text-decoration: none;
            font-size: 22px;
            font-family: 'Yesteryear', cursive;
            text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
            }
            /*任务一、设置不同列表的背景色*/
            li:nth-of-type(1) a{
            background-color: #02646e;
            }
            li:nth-of-type(2) a{
            background-color: #eb0837;
            }
            li:nth-of-type(3) a{
            background-color: #67b374;
            }    
            li:nth-of-type(4) a{
            background-color: #e6674a;
            }    
            li:nth-of-type(5) a{
            background-color: #e61061;
            }
            /*任务二、设置缩略图形状*/
            li a::after{
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 9999;
            top: -80px;
            }
            /*任务三、设置缩略图背景图像*/
            li:nth-of-type(1) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
            }
            li:nth-of-type(2) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
            }
            li:nth-of-type(3) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
            }
            li:nth-of-type(4) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
            }
            li:nth-of-type(5) a::after{
            background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
            }
            /*任务四、给缩略图添加蒙板效果*/
            li a::before{
            content:"";
            display: block;
            height: 120px;
            width: 120px;
            border: 5px solid #fff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            z-index: 99999;
            top: -80px;
            background: rgba(0,0,0,0.3);
            }
            /*任务五、鼠标悬浮时，修改缩略图蒙板透明度*/
            li a:hover:before{
            opacity:0;
            }
            /*任务六、点击综略图，切换背景图*/
            /*背景图从左向右出现*/
            .slideLeft:target{
            z-index: 100;
            -webkit-animation-name: slideLeft;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
            -moz-animation-name: slideLeft;
            -moz-animation-duration: 1s;
            -moz-animation-iteration-count: 1;
            -ms-animation-name: slideLeft;
            -ms-animation-duration: 1s;
            -ms-animation-iteration-count: 1;
            -o-animation-name: slideLeft;
            -o-animation-duration: 1s;
            -o-animation-iteration-count: 1;
            animation-name: slideLeft;
            animation-duration: 1s;
            animation-iteration-count: 1;
            }
            /*背景图从下向上出现*/
            .slideBottom:target{
            z-index: 100;
            
            -webkit-animation-name: slideBottom;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
            -moz-animation-name: slideBottom;
            -moz-animation-duration: 1s;
            -moz-animation-iteration-count: 1;
            -ms-animation-name: slideBottom;
            -ms-animation-duration: 1s;
            -ms-animation-iteration-count: 1;
            -o-animation-name: slideBottom;
            -o-animation-duration: 1s;
            -o-animation-iteration-count: 1;
            animation-name: slideBottom;
            animation-duration: 1s;
            animation-iteration-count: 1;
            }
            /*背景图由小到大出现*/
            .zoomIn:target{
            z-index: 100;
            -webkit-animation-name: zoomIn;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
            -moz-animation-name: zoomIn;
            -moz-animation-duration: 1s;
            -moz-animation-iteration-count: 1;
            -ms-animation-name: zoomIn;
            -ms-animation-duration: 1s;
            -ms-animation-iteration-count: 1;
            -o-animation-name: zoomIn;
            -o-animation-duration: 1s;
            -o-animation-iteration-count: 1;
            animation-name: zoomIn;
            animation-duration: 1s;
            animation-iteration-count: 1;
            }
            
            /*背景图由大到小出现*/
            .zoomOut:target{
            z-index: 100;
            -webkit-animation-name: zoomOut;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
            -moz-animation-name: zoomOut;
            -moz-animation-duration: 1s;
            -moz-animation-iteration-count: 1;
            -ms-animation-name: zoomOut;
            -ms-animation-duration: 1s;
            -ms-animation-iteration-count: 1;
            -o-animation-name: zoomOut;
            -o-animation-duration: 1s;
            -o-animation-iteration-count: 1;
            animation-name: zoomOut;
            animation-duration: 1s;
            animation-iteration-count: 1;
            }
            
            /*背景图旋转出现*/
            .rotate:target{
            z-index: 100;
            -webkit-animation-name: rotate;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
            -moz-animation-name: rotate;
            -moz-animation-duration: 1s;
            -moz-animation-iteration-count: 1;
            -ms-animation-name: rotate;
            -ms-animation-duration: 1s;
            -ms-animation-iteration-count: 1;
            -o-animation-name: rotate;
            -o-animation-duration: 1s;
            -o-animation-iteration-count: 1;
            animation-name: rotate;
            animation-duration: 1s;
            animation-iteration-count: 1;
            }
            /*任务七、设置不显示的背景图层级*/
            /* Not Target */
            
            .bg:not[::target]{
            -webkit-animation-name: notTarget;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: 1;
            -moz-animation-name: notTarget;
            -moz-animation-duration: 1s;
            -moz-animation-iteration-count: 1;
            -ms-animation-name: notTarget;
            -ms-animation-duration: 1s;
            -ms-animation-iteration-count: 1;
            -o-animation-name: notTarget;
            -o-animation-duration: 1s;
            -o-animation-iteration-count: 1;
            animation-name: notTarget;
            animation-duration: 1s;
            animation-iteration-count: 1;
            }
        </style>
    </head>
    <body>
        <div class="slider">
            <ul class="clearfix">
            <li><a href="#bg1">Hipster Fashion Haircut </a></li>
        <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>
        <li><a href="#bg3">My haire is sooo fantastic!</a></li>
        <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>
        <li><a href="#bg5">Lips so kissable I could die ...</a></li>
        </ul>
        </div>
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg" alt="" class="bg slideLeft" id="bg1" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg" alt="" class="bg slideBottom" id="bg2" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg" alt="" class="bg zoomIn" id="bg3" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg" alt="" class="bg zoomOut" id="bg4" />
        <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg" alt="" class="bg rotate" id="bg5" />
    </body>
</html>

46、动画--

通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性；

transition-duration:指定完成过渡所需的时间；

transition-timing-function:指定过渡函数；

transition-delay:指定开始出现的延迟时间；

1）过渡属性 transition-property

用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

2）过渡所需时间 transition-duration

主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

3）属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

4)过渡延迟时间 transition-delay

e.g:

div{width:200px;height:200px;margin:20px auto;background-color:pink;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.5s;

transition-duration:.5s;-webkit-transition-timing-function:ease in;transition-timing-function:ease in;-webkit-transition-delay:.18s;transition-delay:.18s;}

div:hover{width:400px;background-color:green;border-radius:10px;}

47、动画

1）Keyframes介绍

关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

e.g.:

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

浏览器支持情况：

Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。

e.g.:通过“@keyframes”声明一个名叫“wobble”的动画，从“0%”开始到“100%”结束，同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px，背景色为green，然后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px，背景色为blue，最后“100%”时结束动画，元素又回到起点left为100px处，背景色变为red。

2）调用动画

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

语法：animation-name: none | IDENT[,none|DENT]*;

1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；
2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。

3）设置动画播放时间

animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒

语法：animation-duration: <time>[,<time>]*

取值<time>为数值，单位为秒，其默认值为“0”，这意味着动画周期为“0”，也就是没有动画效果（如果值为负值会被视为“0”）

提示：到目前为止支技animation动画的只有webkit内核的浏览器，所以我需要在上面的基础上加上-webkit前缀，据说Firefox5可以支持css3的 animation动画属性。

e.g.:制作一个矩形变成圆形的动画，整个动画播放时间持续了10s钟。

4）设置动画播放方式

animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。

语法：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

5）设置动画开始播放的时间

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

语法：animation-delay:<time>[,<time>]*

6)设置动画播放次数

animation-iteration-count属性主要用来定义动画的播放次数。

语法：animation-iteration-count: infinite | <number> [, infinite | <number>]*

1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite，动画将会无限次的播放。

注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

7)设置动画播放方向:animation-direction

语法：animation-direction:normal | alternate [, normal | alternate]*

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为：animation-direction:alternate;

注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

8) 设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态。
参数：其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

e.g.:

@keyframes move {
  0%{
    transform: translateY(90px);
  }
  15%{
    transform: translate(90px,90px);
  }
  30%{
    transform: translate(180px,90px);
  }
  45%{
    transform: translate(90px,90px);
  }
  60%{
    transform: translate(90px,0);
  }
  75%{
    transform: translate(90px,90px);
  }
  90%{
    transform: translate(90px,180px);
  }
  100%{
    transform: translate(90px,90px);
  }
}


div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: .2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:paused;
}
div:hover span {
  animation-play-state:running;
}

9) 设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：



在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。