美文网首页
CSS 变形与动画

CSS 变形与动画

作者: 仙姑本姑 | 来源:发表于2019-12-02 17:42 被阅读0次

transform

属性 作用
旋转rotate transform:rotate(45deg)顺时针旋转45°;负值为逆时针。不改变元素形状
变形skew transform:skew() 将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。改变元素形状
缩放scale ①transform:scale(X,Y)使元素水平方向和垂直方向同时缩放;
②transform:scaleX(x)元素仅水平方向缩放;
③transform:scaleY(y)元素仅垂直方向缩放
位移 translate ①transform:translate(x,y)水平方向和垂直方向同时移动;
②transform:translateX(x)仅水平方向移动;
③transform:translateY(Y)仅垂直方向移动
x为正时右移,y为正时下移
矩阵 matrix matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵
如果没有缩放,只是平移,则abcd为1,0,0,1,平移的x值对应e,y值对应f。
如果有缩放,x轴的缩放比例对应为a,y轴的缩放比例对应为d。
原点
transform-origin
重置原点位置,再进行旋转之类的操作。
transition-property用来指定过渡动画的CSS属性名称,而这个过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果,其对应具有过渡的CSS属性主要有:
undefined

transition

属性 作用
过渡属性transition-property 指定对HTML元素的哪个css属性进行平滑渐变处理,该属性可以指定。例如background-color,width,height等各种标准的CSS属性。
当“transition-property”属性设置为all时,表示的是所有中点值的属性。
transition-duration 指定完成过渡所需的时间
transition-timing-function 指定过渡函数,主要时过程中速度的变化
transition-delay 指定开始出现的延迟时间

transition-timing-function的取值

描述
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

相关文章

  • 2017-06-18

    css3中变形与动画(上) 1.Animation 动画定义animation动画2.Animation动画播放 ...

  • 无标题文章

    css3中变形与动画(下) 1.设置动画播放次数: animation-iteration-count 定义动画的...

  • CSS变形、过渡和动画

    CSS实战手册 CSS变形,过渡和动画 1 变形 transform 1.1 旋转:rotate transfor...

  • CSS变形与动画

    变形与动画是css3中的知识,但是一直都掌握的不是很熟练,今天就把它彻底的过一遍 变形 CSS transform...

  • CSS 变形与动画

    transform 属性作用旋转rotatetransform:rotate(45deg)顺时针旋转45°;负值为...

  • CSS变形与动画

    2019-04-15 2D变形 旋转效果: transform:rotate 扭曲效果: transform:sk...

  • web前端入门到实战:CSS3中的变形(transform)、过

    css3中制作动画的几个属性:css3中的变形(transform)、过渡(transition)、动画(anim...

  • web前端入门到实战:CSS3中的变形(transform)、过

    css3中制作动画的几个属性:css3中的变形(transform)、过渡(transition)、动画(anim...

  • 2019-06-04

    css基础知识 变形: 元素旋转 变形中心点: 背面可见 图片翻转: animation动画: 定义动画名称及形式...

  • CSS变形动画

    过渡动画 css3的特征之一,可以在不使用flash或JavaScript的情况下,当元素从一种样式变换成另一种样...

网友评论

      本文标题:CSS 变形与动画

      本文链接:https://www.haomeiwen.com/subject/esrfgctx.html