css3

测试css3兼容性网站：www.caniuse.com

：before与：after的理解:
p：before{//在<p>标签的文本之前添加“我在之前添加文本”

content:"我在之前添加文本"；//不可省略，要想不添加内容可以用content:"";

}
p：after{//在<p>标签的文本之后添加“我在之后追加文本”

content:"我在之后追加文本"；

width:100px;height:100px;dispaly:block;//要使样式有效必须设置为块元素，：before/：after是伪类元素，并非直接作用于<p>元素，

}

perspective的理解:

　　1、数值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻（比如看电影，越前面的人屏幕越大）

　　2、数值大，用户与3D空间Z平面距离越远，视觉效果就很小

　　3、数值无穷大 | 为0  == none 即：无透视

　　4、perspective分为perspective属性和perspective函数,两者的区别：

　　　　　　perspective属性在父元素中添加，为none | 长度值，perspective函数在子元素添加（与tranform一起使用）,数值>0;

　　　　　　perspective属性，有多个元素，看到的效果是不一样的，perspective函数，有多个元素，看到的效果是一样的，请见张旭鑫的deom:舞台多元素下的perspective两种书写对比demo

　　5、当父元素perspective:200px时，子元素transform:translateZ(200px)会辅满整个屏幕（没有设置display:hidden，如果设置会不起作用），当>200px，会看不到（以电影幕为例，人跑到电影幕后面去，看不到后面的东西）

 

perspective-original:X方向 Y方向

transform-style :preserve-3d    | transfrom:transformZ()开启3D效果

backface-visibility: visible | hidden

 

animation和transition的理解:

animation:　animation-name　　animation-duration　　animation-timing-function　　animation-delay　　animation-iteration-count　　animation-direction　　animation-fill-mode　　animation-play-state

(none 0s ease 0s 1 normal none running)

　　animation-name:none

　　animation-duration:0s

　　animation-timing-function:ease

　　animation-delay:0s

　　animation-iteration-count:1 | infinite

　　animation-direction:normal | reverse | alternate(交替) | reverse-alternate

　　animation-fill-mode:none | forwards(最后一帧) | backwards(第一帧) | both

　　animation-play-state:running | pause

 

transition:　　transition-property　　transition-duration　　transition-timing-function　　transition-delay

transition:color 3s linear,width 2s linear 1s,height 3s;//对color过渡时间3s效果linear，宽度延时1s后开始过渡时间2s,高度过渡时间3s，常在：hover对应的标签上使用