有了这些，CSS3动画 is So Easy!

1、变形 - transform 迅速变化
2、过渡 - transition 缓慢变化
3、动画 - animation 关键帧动画




1、转换原点
   默认情况下，原点是在当前物体的中心点上
   修改原点:
     属性:transform-origin
     值: 
         1、x坐标  y坐标
    当前物体的左上点为 x:0 y:0
 2、宽度百分比 高度百分比
    0%   0% 左上点
    50% 50% 中心点
 3、关键字
    top:上
    bottom:下
    left:左
    right:右
    center:中间
    center center
    left top
    transform-origin:0; 表示 所有轴的位置都将归到0点处
    transform-origin:50px 50px; 表示 x轴在50像素处，y轴在50像素处
    transform-origin:50px 50px 50px; 表示 x轴，y轴，z轴
2、变形:2d
   旋转:rotate()
   位移:translate()
   缩放:scale()
   倾斜:skew()


   旋转:围绕一个参照原点(transform-origin),旋转指定角度，默认为顺时针
   语法:transform:rotate(ndeg);
        n为正 则按顺时针旋转
n为负 则按逆时针旋转
   注意:rotate在旋转的过程中，不但能够旋转元素，同时能够旋转绘图的坐标系方向。如果配合着其他的变形一起来做的话，rotate在前的话，会影响之后延坐标轴的其他变形。
   解决方案:如果配合变形一起来做，最好将rotate放在最后一个函数上
   
   位移:延 坐标方向 移动指定的距离
   语法:translate(x轴移动距离,y轴的移动距离);
        x : 正为右，负为左
y : 正为下，负为上

transform:translate(50px,50px);
   注意:位移不会影响其他元素位置,单可能会盖住周围元素
   其他两个单方向位移:
        translateX(距离);
translateY(距离);
   
   缩放:将指定坐标轴上的坐标缩放指定的倍数
   语法:scale(倍数)
        倍数 : 0-1 之间的小数,缩小
       >1 放大
scale(倍数) 表示等比缩放
   其他两个单方向缩放:
        scaleX(倍数);
scaleY(倍数);
   transform:scale(2);


   倾斜:沿着坐标轴方向，倾斜指定角度
   语法:skew(ndeg);仅沿x轴倾斜
        skew(ndeg,ndeg);沿着x轴和y轴同时倾斜
   单方向倾斜:
        skewX(ndeg)
skewY(ndeg)
   x轴方向:角度为正，向左倒
           角度为负，向右倒
   y轴方向:角度为正向上倾斜
           角度为负向下倾斜


3、3d变形
   元素,要从立体角度观察
   坐标轴,x轴，y轴，z轴


   属性:
      perspective
      设定假定的人眼位置到投影平面的距离
      如何使用：设置在父元素上的
      浏览器兼容性:
       Chrom,Safari : -webkit-perspective
       Firefox : -moz-perspective
   位移:
       3D位移可以改变元素在z轴上的位置
       translateZ(z);
       translate3d(x,y,z);
   旋转:
transform:
     rotateX(ndeg);
     rotateY(ndeg);
     rotateZ(ndeg);
   缩放:
       transform:
           scaleZ(z);
   scale3d(x,y,z);
==================================================
1、过渡 
   transition
   1、什么是过渡
      CSS属性在一段时间内进行平滑的过渡
   2、过渡四要素
      1、过渡属性:background,color,transform
      2、过渡所需时间:
      3、过渡函数:速度和方式
      4、过渡延迟时间:激发操作后的执行间隔(s|ms)
   3、过渡属性
      1、过渡属性
         属性名:transition-property
 transition-property:background,color;
      2、过渡时间:
         属性名:transition-duration:
 以秒(s)或毫秒(ms)为单位
 transition-duration:5s;
      3、过渡函数
         属性名:transition-timing-function
 备选值:
      ease:默认值，慢速开始，快速变快，慢速结束
      linear:匀速过渡
      ease-in:慢速开始，加速效果
      ease-out:以慢速结束，减速效果
      ease-in-out:以慢速开始和结束，中间先加速再减速
      4、过渡延迟
         属性名:transition-delay
 以秒或毫秒为单位
      5、整合transition属性
         transition:属性名 持续时间 过渡函数 [延迟],
    属性名 持续时间 过渡函数 [延迟];
2、关键帧动画
   关键帧:动画执行过程中，物体在某一位置上的特殊状态
   关键帧动画:使用连续的关键帧，控制物体联系的状态变化
   什么时候使用关键帧动画:
   1、连续，有规律的过渡 -- 过渡 transition
   2、无规律的连续变化 -- 动画 animation
   如何实现:
   2大步:
   1、定义关键帧
      @keyframes 动画名{
from{ 
   0%
   css样式 
   动画开始的状态
}

percent{

}


to{
   100%
   css样式
   动画结束的状态
}
      }


      @keyframes change{
from{
background:red;
}
10%
{
background:yellow;
}
50%
{
background:green;
}
to
{
background:pink;
}
      }


      浏览器兼容性:
      @keyframes : IE , 火狐
      @-webkit-keyframes : Chrome Safari
      @-o-keyframes : Opera
   2、触发动画(调用动画)
      属性:animation
         animation:动画名 持续时间 速度类型;
 如何:
    1、写在非伪类选择器中，页面加载则执行动画
    2、写在伪类中，伪类触发时则播放动画
      浏览器兼容性:
        -webkit-animation: Chrome，Safari
-o-animation:Opera
   3、动画子属性
      1、animation-name : @keyframes(动画)名称
      2、animation-duration : 动画时长
      3、animation-timing-function:动画速度函数
      4、animation-delay:动画的延迟时间
      animation:name duration timing-function;
      5、animation-iteration-count : 播放次数
         取值:
   1、具体数值
   2、infinite(无限次播放)
      6、animation-direction : 动画播放方向
         取值:
   1、normal 正常播放
   2、alternate 轮流播放
      奇数次数：正向播放
      偶数次数：反向播放
 animation:name duration timing-function delay iteration-count direction;
      7、animation-fill-mode
         动画播放前后的效果
 备选值:
   1、none:不改变默认行为
   2、forwards:动画完成后保证最后一个属性状态
   3、backwards:动画播放前，显示开始属性值
   4、both
      8、animation-play-state
         控制动画播放与暂停
 备选值:
   1、paused : 暂停动画
   2、running : 播放动画
 使用场合:
   1、配合伪类选择器
   2、结合Javascript使用


@keyframes second{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
调用
#second{
animation:second 60s linear 0s infinite;
}

CSS3高级内容集

1、伪类选择器

   回顾：什么是伪类选择器
         更改元素的不同的状态的样式
:hover :link :visited :active
   1、目标伪类
      1、什么是目标伪类
         突出显示活动的HTML锚，用于选取当前活动的目标元素
      2、语法
         :target
p:target
   2、元素状态伪类
      1、什么是元素状态伪类
         主要匹配元素的禁用、启用、选中状态
         多数应用在表单元素上
      2、常用的状态伪类
         :disabled  匹配每个被禁用的元素
:enabled 匹配每个已启用的元素
:checked 匹配每个被选中的元素(只用于单选按钮和复选框)
   3、结构伪类
      1、什么是结构伪类
         主要从元素的结构(层级结构)上来进行划分的
      2、什么时候使用结构伪类
         找 第一个子元素、最后一个子元素、没有子元素、仅仅只包含一个子元素 优先使用结构伪类
      3、如何使用结构伪类
         :first-child  匹配属于其父元素的首个子元素
:last-child 匹配属于其父元素的最后一个子元素
:empty 匹配没有子元素(包含文本)的元素
  <p>这是一个段落</p> 非empty
  <div></div> empty
:only-child 匹配属于其父元素的唯一子元素
  <div>
    <span></span>
    <span></span>
  </div>
  <div>
    <span></span>
  </div>
 
   4、否定伪类
      匹配非指定元素/选择器的每个元素
      语法: 
           :not(selecotr)
      eg:
        1、获取 input 但是 type不是text的所有元素
  input[type=text]
  input:not([type=text])
2、获取除第一个div子元素意外的其他div子元素
  div:first-child
  div:not(div:first-child)
2、伪元素选择器
   主要针对元素中的文本内容进行匹配的。
   1、:first-letter
      选取指定选择器的首字母
      eg:
        p:first-letter{

}
      一般用于 排版、首字符突出等操作
   2、:first-line
      选取指定选择器的首行
   3、::selection
      匹配用户选取的部分
  
=================================================
1、内容生成
   1、什么是内容生成
      通过css 向元素的前面或后面增加一部分内容
   2、伪元素
      :before 匹配到某一元素的最前面
          p:before
      :after 匹配到某一元素的最后面
          p:after
   3、内容生成
      content : 配合 :before 或 :after伪元素，插入生成内容
      content的常用取值:
      1、字符串:纯文本，插入到指定的位置处
         p:before{
content:"至尊宝:";
}
      2、url:生成的图像
         a:before{
content:url(Images/i1.jpg);
}
      3、计数器
2、计数器
   1、计数器的作用
      向已存在的html文本内容增添序号
   2、如何使用计数器
      1、定义计数器
         属性:counter-reset
作用:定义一个计数器，并且设置初始值为0
body{
counter-reset:计数器名称 初始值 计数器名称 初始值;
}
body{
counter-reset:count 10;
}
 
      2、设置计数器增量
         可以单独设置某一选择器使用计数器时的增量，默认值是1
属性:counter-increment
         div{
counter-increment:count 10;
}
      3、使用计数器
         通过 counter(计数器名称) 来使用计数器
div:before{
content:"第"counter(count)"章";
}
3、多列
   1、分隔列
      把一段文本拆分成几列
      column-count:规定元素被分隔的列数
   2、列间隔
      设置列与列之间的距离
      column-gap:间隔;
   3、列规则
      可以在列与列之间设置一条间隔线，列规则可以设置间隔线的样式、颜色、粗细
      column-rule:大小 样式 颜色;


      column-rule-width:
      column-rule-style:
      column-rule-color:
   4、浏览器兼容
      1、IE10 以及 Opera 浏览器支持多列属性
      2、FireFox 需使用前缀 -moz-
         -moz-column-count:
-moz-column-gap:
-moz-column-rule:
      3、Chrome 和 Safari
         -webkit-column-count:
-webkit-column-gap:
-webkit-column-rule:
4、CSS Hack
   1、为什么需要CSS Hack
      浏览器兼容性所引发的问题


   2、浏览器运行模式
      1、混杂模式
      2、标准模式(Standard Mode)
      3、准标准模式(Almost Standard Mode)
   3、浏览器主要通过 DOCTYPE 进行模式选择
      触发混杂模式:不声明DOCTYPE
      触发标准模式:


   4、浏览器兼容问题
      1、margin和padding
         ie6中 默认的 maring 偏大
解决方案:body{margin:0px;}
      2、居中布局
         ie6以及低版本浏览器:通过父元素的text-align:center;完成居中
高版本浏览器(ie6,ie7+,chrome,firefox,opera,safari):通过当前元素的margin实现即 margin:0 auto;
      3、元素高度与内容
         ie6 : 元素的高度至少包括内容
其他:元素高度会超出容器
解决方案:overflow属性
      4、子元素设置上外边距时
         ie6:正常显示
其他版本:子元素的上外边距会认为是父元素的上外边距
解决方案:
   1、给父元素设置边框
   2、设置父元素的 padding-top


   5、HTML头部引用Hack
      通过HTML条件注释完成
      <!--[if 条件]>
      <![endif]-->


      IE6:
         <!--[if IE 6]>
  编写HTML
  引入css
<![endif]-->
      大于IE6的版本:
      <!--[if gt IE 6]>

      <![endif]-->