首页 > 代码库 > css3总结

css3总结

之前对技术方面没有过多的总结,今天第一篇博客对css3做了以下总结:

首先css3比较强大的就是动画了,css3动画分为两种:tranation 和 animation;

这两种有什么区别呢?? 


tranation的动画需要事件触发 animation的动画不许要事件触发就运动 ,tranation 必须放在初始状态;

-webkit-transform:rotate(360deg) scale(1.2) skew(xdeg,ydeg)注意:参数为两位数的小数,正数为放大,小数为缩小,两个参数的时侯表示width 和 height  translate(xpx ypx) 位移。skew(xdeg,ydeg)斜切。


@-webkit-keyframes mymove{ //注意 mymove 是动画名称
form{
} to{
}
}

-webkit-animation:name(动画名称) 1s(动画运行时间)   timing-function(运行方式);

 

再次说简单说下盒子模型:

display:-webkit-box;
-webkit-box-pack : start(左)end(右) justify(平均分布) center(中)
-webkit-box-align : start(左)end(右) center(中)stretch(拉伸子元素以填充包含块)
-webkit-box-orient:horizontal(水平)vertical(垂直) //注意:以上三个属性都是作用在子元素上的 建议子元素为块元素

-webkit-box-flex:1;元素向父盒子陈开 2是1的两倍 作用在子元素上
-webkit-box-direction: normal/reverse/inherit //reverse反方向显示子元素 inherit子元素继承父元素


display:inline-block; 行内块元素

box-ordinal-group: integer; integer是数值表示子元素的显示次序

 

css3总结