transform
transform:设置变形;需添加浏览器前缀-o-;-webkit-;-moz-等;有如下变形函数
translate(tx [,ty]):组件横向上移tx,纵向上移ty距离
translateX(tx):组件横向上移动tx距离
translateY(ty):组件纵向上移动ty距离
scale(sx,sy):横向上缩放比例为sx,纵向上缩放比例为sy;sy省略情况下默认等于sx
scaleX(sx):只在横向上进行缩放,缩放比例为sx
scaleY(sy):只在纵向上进行缩放,缩放比例为sy
rotate(angle):组件顺时针转过angle角度
skew(sx[,sy]):设置组件沿X轴倾斜sx角度,沿Y轴倾斜sy角度,sy可省略,默认为0
skewX(sx):设置组件沿X轴倾斜sx角度
skewY(sy):设置组件沿Y轴倾斜sy角度
matrix(m11,m12,m21,m22,dx,dy):基于矩阵变换的函数,前四个参数将组成变形矩阵,dx,dy将负责对左边系统进行平移
transform-origin:设置变形的中心点,属性值指定为xCenter,yCenter,支持以下几种属性值:
left:指定旋转中心点位于组件的左边界,只指定给xCenter
top:指定旋转中心点位于组件的上边界,只指定给yCenter
right:指定旋转中心点位于组件的右边界,只指定给xCenter
bottom:指定旋转中心点位于组件的下边界,只指定给yCenter
center:指定旋转中心点位于组件的中间,如果将xCenter,yCenter都制定为center则旋转中心点为元素的中心
长度值:指定旋转中心点距离左边界,右边界的长度
百分比:指定旋转中心点位于横向,纵向上的百分比位置
transition
transition动画控制组件的某个属性发生改变时会经历一段时间,以平滑渐变的方式发生改变。包含以下4个部分
transition-property:指定元素的哪个属性进行平滑渐变处理,可以指定background-color,width,height等
transition-duration:指定平滑渐变的持续时间
transition-timing-function:指定渐变的速度,可选值
ease:开始慢后快再减慢,相当于cubic-bezier(0.25,0.1,0.25,1)
linear:匀速,相当于cubic-bezier(0,0,1,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(x1,x2,y1,y2):通过贝济诶函数来控制动画的速度
transition-delay:指定延迟时间
Animation动画:提供了以下属性
animation-name:指定动画名称
animation-duration:指定动画持续时间
animation-timing-function:指定动画变化速度
animation-delay:指定动画延迟时间
animation-iteration-count:指定动画循环执行次数
重点动画:鱼眼效果。鼠标放在文字上面的时候,文字放大