css3中的变形和动画(3)

rotate 旋转,通过rotate()函数指定旋转的角度,元素相对原点进行旋转,
如果是正值,顺时针旋转,负值,元素相对原点逆时针旋转。


skew(),扭曲倾斜,它可以将一个对象以其中心为之围绕着X轴和Y轴按照
一定角度倾斜,会改变元素的形状。使用时,分为三种情况:1、skew(x,y)
是元素在水平和垂直方向同时扭曲。2、skewX(x)仅使元素在水平方向扭曲变形
3、skewY(y)仅使元素在垂直方向扭曲变形。


scale()缩放函数让元素根据中心原点对对象进行缩放。
scale(x,y)使元素在水平方向和垂直方向同时缩放。
scaleX(x)元素仅在水平方向缩放
scaleY(y)元素仅在水平方向缩放


translate()函数将元素在指定方向移动,类型position的relative。使用
translate函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何
Web组件。


matrix()矩阵函数,一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个
2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向
(X轴)和垂直方向(Y轴)重新定位元素。
http://www.css88.com/tool/css3Preview/Transform-Matrix.html


transform-origin,变换原点位置。任何元素都有一个中心点,默认情况下,
中心点居于X轴和Y轴的50%处。


transition-property动画过渡属性。
transition属性的几个子属性,
transition-property:指定过渡或动态模拟的css属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数,共有5个参数可选(ease/linear/
ease-in/ease-out/ease-in-out)
transition-delay:指定开始出现的延迟时间,是说当改变元素属性值后多长时间开始执行。


有时我们想改变两个或者多个css属性的transition效果时,只要把几个transition的声明
串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变
换方式。但需要值得注意的一点:第一个时间的值为 transition-duration,
第二个为transition-delay。


Keyframes关键帧,在css3中主要以"@keyframes"开头,后面紧跟着动画名称加上一对花括号
@keyframes changecolor{
  0%{
   background: red;
  }
  50%{
   background: blue;
  }
  100%{
    background: green;
  }
}
div:hover{
  animation: changecolor 5s ease .1s;
}
animation的几个属性
animation-name;name必需和keyframes定义的完全一致,区分大小写。
animation-duration;动画时间持续时间
animation-timing-function;ease/linear/ease-in/ease-out/ease-in-out
animation-delay;动画开始推迟


animation-iteration-count,设置动画播放次数
infinite(无限次播放)/默认一次/可以填数字


animation-direction;属性设置动画播放方向,
normal为默认值,动画每次循环都是向前播放;
alternate,动画播放在偶数次向前播放,奇数次向反方向播放。


animation-play-state属性用来控制元素动画的播放状态,running和paused


animation-fill-mode属性定义动画开始之前和结束之后发生的操作
none、forwards、backwords、both
none||表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转(会有一段时间动画)到初始帧处
forwards||表示动画在结束后继续应用最后的关键帧的位置
backwards||会在向元素应用动画样式时迅速应用动画的初始帧
both||元素动画同时具有forwards和backwards效果


10-1.样式布局css3的多列布局
columns:多列布局
<column-width> <column-count>
<column-gap>用来设置列与列之间的间距
<column-rule>主要用来定义列与列之间的边框宽度、边框样式和边框颜色。column-rule不占用任何空间位置,在
列与列之间改变其宽度不会改变任何列的位置。

<column-span>跨列设置,主要用来定义一个分列元素中的子元素能跨列多少。


阅读更多
个人分类: web 前端css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭