通过CSS3,我们可以在不适用Flash动画或javaScript的情况下,
当元素从一种样式变换为另一种样式时为元素添加效果。
IE10、Firefox、Chrome以及Opera支持transition属性。
Safari需要前缀 -webkit-
IE9以及更早的版本,不支持transition属性。
Chrome25以及更早的版本,需要前缀 -webkit-
要实现这一点,必须规定两项内容:
规定希望吧效果添加到那个CSS属性上
规定效果的时长
所有的转换属性:
属性 描述
transition 简写属性,用于在一个属性中设置四个过渡属性
transition -property 规定应用过渡的CSS属性的名称
transition -duration 定义过渡效果花费的时间。默认是0
transition -timing-function 规定过渡效果的时间曲线。默认为ease
transition 规定过渡效果何时开始
语法:transition-property:none| all | property;
说明:transition-property属性规定应用过渡效果的css属性名称
当指定的css属性改变时,过渡效果将开始。
none:没有属性会获得过渡效果。
all:所有属性都将获得过渡效果。
property:定义应用过渡效果的css属性名称列表,列表以逗号隔开。
语法:transition-duration:time;
说明:transition-duration属性规定完成过渡效果需要花费的时间以
秒或毫秒计算。
time:规定完成过渡效果需要花费的时间,以秒或毫秒计。
默认值是0,以为着不会有效果。
语法:transition-timing-function:linear | ease |ease-in
ease-out | ease-in-out |cubic-bezier(n,n,n,n);
说明:transition-timing-function属性规定过渡效果的速度曲线。
linear:规定以相同速度开始至结束的过渡效果
ease:规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in:规定以慢速开始的过渡效果
ease-out:规定以慢速结束的过渡效果
ease-in-out:规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值
可能的值是0~1之间的数值。
语法:transition-delay:time;
说明:transition-delay属性规定过渡效果何时开始
Time:规定在过渡小狗开始之前需要等待的时间,以秒或毫秒计。
transform字面上就是变形,改变的意思。
在CSS3中transform主要包括以下几种:
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
语法:transform:none | rotate |scale |skew |trans |ate |matix;
说明:
none:表示不进行变换;
可以同时对一个元素进行transform的多种属性操作,例如rotate、
scale、translate三种,单transform中使用多个属性时却需要有空格隔开。
旋转rotate
rotate():通过指定的角度参数对原元素指定一个2D rotate(2D旋转)
需要先有transform-origin属性的定义。
transform-origin定义的是旋转的基点,其中angle是指旋转角度,
如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示
逆时针旋转。
如:transform:rotate(30deg)
移动translate
移动translate我们分为三种情况:
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)
translateX(x)仅水平方向移动(X轴移动)
translateY(y)仅垂直方向移动(Y轴移动)
如:
transform:translate(100px,20px)
transform:translateX(100px)
transform:translateY(20px)
缩放scale
缩放scale和移动translate是极其相似,他也是具有三种情况:
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)
scaleX(x)元素仅水平方向缩放(X轴缩放)
scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放
中心点和基数,其中心点就是元素的中心位置,缩放基数为1
如果其值大于1元素就放大,反之其值小于1,元素缩小
如:
transform:scale(2,1.5)
transform:scaleX(2)
transform:scaleY(2)
扭曲skew
怒去skew和translate、scale一样同样具有三种情况:
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴
同时按一定的角度值进行扭曲变形)
skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)
skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
如:
transform:skew(30deg,10deg)
transform:skewX(30deg)
transform:skewY(10deg)
改变元素基点transform-origin
transform-origin主要作用是在进行transform动作之前可以改变元素
的基点位置,因为元素默认基点就是其中心位置,没有使用
transform-origin改变元素基点位置的情况下,transform进行的
rotate,translate,scale,skew,matrix等操作都是以元素自己
中心位置进行变化的
单有时候需要在不同的位置对元素进行这些操作,那么就可以使用
transform-origin来对元素进行基点位置改变,使元素基点不在是
中心位置,以达到需要的基点位置。
语法:transform-origin:x-axis y-axis
说明:
默认点是元素的中心点。
其中x和y的值可以是百分之,em,px,其中x也可以是字符参数值
left,center,right;Y和X一样除了百分值外还可以设置字符值
top,centerm,bottom,这个看上去有点像background-position设置一样
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- ovod.cn 版权所有 湘ICP备2023023988号-4
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务