CSS3-网站导航，transform，transition

网站导航：

1、a：link    visited    hover   active的顺序是很重要的，如果改变顺序，则hover以及active的状态不起作用

2、<a href="#" class="button">Tina</a>

其中a.button 与 .button都可以实现，但a.button只应用给带button类的a标签

.button应用给带有该类的所有标签

3、因为a是行内标签，则添加top/bottom padding或者margin对它都没有影响，所以我们首先要将他转化成块级元素

4、inline元素的display属性设置为inline-block时，所有的浏览器都支持；

block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；

5、在IE8及更早之前的版本都不支持not（）选择器

6、所有的邮箱链接都是以mailto:开头的，我们可以这样设置a[href^='mailto:']

7、指向文件的属性选择器：a[href$='.zip']       ；a[href$='.pdf']；     a[href$='.doc']

Css的transform，transition，animation

1、transform：rotate（10deg）表示旋转10度  -------顺时针

2、transform属性在ie8之前都不支持，所以可以加前缀

-ms-代表的是微软公司，目标是IE浏览器

3、transform：scale（2）表示缩放   ---其中2表示的是缩放倍率，他要乘以当前的尺寸，放大不仅仅是外部的宽高，元素以及里面所有的内容都会进行相应的缩放

4、在放大一个网页元素的时候，浏览器并不会将网页上的其他元素移开，但会出现覆盖的情况

5、还可以分别缩放水平方向以及垂直方向的尺寸，里面的数值，第一个代表的是水平方向上，第二个代表的是垂直方向上transform：scale（2，.5）

transform：scaleX（2）沿着X轴缩放，scaleY沿着Y轴缩放

如果给scare使用负值，让元素翻转

6、transform的translate函数只是将一个元素从他现在的位置上向左或向右以及向上或向下移动一定的距离，当移动的时候，浏览器会在标签正常显示的位置上面留下一个空白，在新的位置上面绘制该元素

7、transform：skew（25deg，10deg）一个值是从元素的上方沿着逆时针方向进行的，第二个值是沿着顺时针的方向从元素的右侧进行的

8、transform多种函数可以叠加使用，除非在 使用translate，否则顺序是无关紧要的

9、在transform函数中，都是以一个元素的中心点作为变换点，在旋转的时候就是围绕着它的中心点进行旋转的，可以使用transform-origin改变变换点

10、transition属性只有在IE10以上才能够支持（在一定的时间内，将一组css属性变换到另一组属性的动画展示过程）------页需要供应商前缀才能够生效，在IE9之前不支持，只有10之后才能够支持，所以没有必要添加前缀-ms

.nav{

background-color: orange;

transition-property:background-color;

transition-duration:1s;

}

.nav:hover{

background-color: blue;

}

11、给transition定时，transition-timing-function：linear ，ease ，ease-in，ease-out，ease-in-out，如果没有设定一个定时函数，浏览器会使用ease方法，动画一开始很慢，中间加速，最后又减速；linear则是使整个动画过程平稳的发生变化

12、延迟启动：transition-delay：5s；