css3基本用法

作者:MengYu | 分类:技术交流 | 浏览:576 | 评论:

transform: rotate(150deg) scale(2);
动画     旋转多少度    放大多少倍
transform: rotate(150deg)
 旋转多少度
transform:scale()
放大多少倍
transform:skew(30deg,-10deg)
倾斜多少度 :水平度数    垂直度数
transform:translate(40px,40px);
位移    水平位移像素    垂直位移像素
transition:transform   ease  1s
过渡    过渡的对象 过渡的方式   过渡的时间
all过渡的对象是所有
如果要实现一个或者多个  需要多少写多少
如果是全部都要实现过渡效果写all
ease由快到慢
ease-in减速
ease-in-out先慢再快
ease-out加速
linear  匀速
transform: rotate(150deg)
标准写法
-ms-transform: rotate(150deg)
兼容IE的写法   ms是IE的内核
-o-transform: rotate(150deg)
兼容Opera的写法  
-moz-transform: rotate(150deg)
兼容火狐浏览器的写法
-webkit-transform: rotate(150deg)
兼容谷歌浏览器的写法
这些都是兼容各各浏览器低版本的写法,针对有些版本比较低的浏览器使用。
css3自定义动画
animation:xxx 15s infinite  ease
自定义动画:动画名称   动画时间  动画循环次数   动画速度(详情看上面)
infinite使动画永远重复
@keyframes xxx{
0%{transform: rotate(0deg)}
100%{transform: rotate(360deg)}
自定义动画的帧 每%多少括号里面写值(执行什么动画,例如:旋转、位移、放大、过渡、倾斜)
perspective  透镜
transform-style:preserve-3d;实现3d效果,不加则是2d。
small  h1~h6标题的副标题
 
 
 
 
 
上一篇:网页标签优化     下一篇:没有了

网名:梦煜

姓名:梦煜

喜欢的书:《从你的全世界路过》《活着》

喜欢的音乐:《烟火里的尘埃》《男孩》

网站分类
hello

hello