首页 > 代码库 > 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总结