码迷,mamicode.com
首页 > Web开发 > 详细

css3总结

时间:2017-05-23 23:40:48      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:box   事件触发   块元素   end   ica   运行时间   group   orm   需要   

之前对技术方面没有过多的总结,今天第一篇博客对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总结

标签:box   事件触发   块元素   end   ica   运行时间   group   orm   需要   

原文地址:http://www.cnblogs.com/jxxx/p/6896586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!