css3总结

Posted 2020-09-19

之前对技术方面没有过多的总结，今天第一篇博客对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是数值表示子元素的显示次序