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-