css3妙用

1、用css3实现三角形

border-left:14px solid transparent;

border-right:14px solid transparent;

border-bottom:14px solid #ffffff;

类似这样，两边透明border，一边有颜色的border；

2、居中

left:50%;

top:50%;

transform:translate3d(-50%,-50%,0);

-ms-transform:translate3d(-50%,-50%,0);

-o-transform:translate3d(-50%,-50%,0);

-webkit-transform:translate3d(-50%,-50%,0);

3、运动、动画效果

-transition eg：

.move-anim{

      transition: margin 1s;

     -webkit-transition: margin 1s; /* Safari */

}
//然后通过js改变margin值

-animation eg：

@-webkit-keyframes zoomIn {

from {

      opacity: 0;

     -webkit-transform: scale3d(.3, .3, .3);

      transform: scale3d(.3, .3, .3);

}

50% {

      opacity: 1;

}

}
.zoomIn {

    -webkit-animation-name: zoomIn;

      animation-name: zoomIn;

}//通过js addClass或者removeClass

注意！！！

css3一定要注意兼容性~~加上-o-,-webkit-,-ms-