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

Css3属性

时间:2019-03-18 21:10:22      阅读:623      评论:0      收藏:0      [点我收藏+]

标签:前缀   方法   number   参数   nim   hid   缩小   mes   ati   

Css3中的过渡属性:transition

    注意事项:

        1:时间要加单位

    过度属性:

        1:属性名称 transition-prorperty

        2:时间:transition-duration

        3:速度:traisition-timing-function

        4:延迟:transition-delay

C3里面的属性简写类似于background的简写

animation:动画    添加动画要写@keyframe前缀

    动画属性:

        动画名称   用于@keyframes anmiation-动画名称

        动画完成的周期:animation-duration

        规定动画的速度曲线:animation-timing-function

        规定当动画不播放时,要应用到元素的样式:animation-fill-mode

        规定动画何时开始:animation-delay

        规定动画播放的次数:animation-iteration-count

        规定动画是否在下一周期逆向的播放:animation-direcition

        规定动画是否正在运行或暂停:animation-play-state

2D和3D

  transform:2D和3D转换的元素

  C3中的3d和2d特效都是方法

  

  transform:translate():平移,两个参数在x轴平移的距离    在y轴平移的距离  ,translateZ()  在z轴平移的距离

    transform:rotate():旋转,参数是number deg(角度)  rotateX()  x轴旋转   (依此类推)

    transform:scale():缩放,两个参数(5)x/y都是5倍   (5,1)  x是5倍,y是1倍;(放大)  (.3)  缩小

    transform:skew():拉伸,两个参数 (xdeg,ydeg);

    注意:transform属性,只能应用于简写,不能分开写,否则后者将会覆盖前者; 

3d的原理:近大远小;

    视距:物体于视网膜的距离

    -webkit-perspective:透镜(视距)(一定要加前缀)(这个属性必须加在父级的元素上面且尽量不要写在body上)  flat(2d);

    -webkit-transform-style:preserve-3d;     (内部子元素成3d效果)

    如果该元素有3d的效果:perspective的视距给他的父级元素;

    transform-origin()  两个参数,旋转位置的修改;让内部的子元素跟父级3d

    backface-visibility:hidden;  元素不面对屏幕时是否可见;

        

 

 

      

Css3属性

标签:前缀   方法   number   参数   nim   hid   缩小   mes   ati   

原文地址:https://www.cnblogs.com/wkxdd/p/10554888.html

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