首页 > 程序开发 > web前端 > HTML/CSS >

用CSS3使你的网页"动"起来——transform属性

2017-08-15

用CSS3使你的网页 "动 "起来——transform属性。

转换

什么是转换

改变元素在页面上的大小,位置,形状以及角度的一种方式

可以向元素应用2D以及3D的转换效果

转换属性

(1)转换效果

属性:transform

取值:1.none:默认值,即没有任何转换效果

2.一个或多个转换函数,如果是多个转换函数,中间用”空格隔开”

(2)转换的原点

属性:transform-origin

取值:

1.两个值:表示原点在x轴和y轴的位置

2.三个值:表示原点在x轴,y轴和z轴的位置

可以取数值/百分比/关键字

2D转换

位移:改变元素在页面上的位置

属性:transform

取值:

1.translate(x):x取值为正,向右移动;x取值为负,向左移动

2.translate(x,y):x同上;y取值为正,下移;y取值为负,向下移动

3.translateX(x)

4.translateY(y)

缩放

属性:transform

取值:

1、scale(value):value表示的是x轴和y轴的缩放倍率

2、scale(x,y)

3、scaleX(x)

4、scaleY(y)

注:x,y的取值 默认为1;放大:大于1的数值;缩小:0-1之间的数字

旋转:改变元素在页面上的角度

属性:transform

取值:rotate(ndeg)

取值为正,顺时针旋转

n取值为负,逆时针旋转

注意: 1、转换原点你会影响旋转效果

2、旋转操作时,连同坐标轴一同都跟着转

倾斜:改变 元素在页面中的形状

属性:transform

取值:1、skewX(ndeg) 让元素向横向倾斜

n取值为正,y轴逆时针倾斜

n取值为负,y轴顺时针倾斜

2、skewY(ndeg) 让元素向纵向倾斜

n取值为正,x轴顺时针倾斜

n取值为负,x轴逆时针倾斜

3、skew(x)

4、skew(x,y)

3D转换

属性:perspective

作用:模拟 人眼睛 到3D转换物体的距离,取值越大,表示离物体越远,取值越小,表示离物体越近

取值:以px为单位的数值

注意:该属性要加在3D转换元素的父元素上 3D旋转

属性:transform

取值:rotateX(xdeg):以x轴为中心轴,旋转元素

rotateY(ydeg):以y轴为中心轴,旋转元素

rotateZ(zdeg):以z轴为中心轴,旋转元素

rotate3D(x,y,z,ndeg):x,y,z取值大于0的话,则该轴参与旋转;x,y,z取值为0的话,则该轴不参与旋转

过渡

什么是过渡

使得CSS的属性值在一段时间内平缓变化的效果

过渡能观察到元素的属性值得变化过程 过渡四要素(四属性)

(1)指定过渡属性

作用:指定那个CSS属性值在变化时需要使用过渡的效果。当指定属性值发生变化时,过渡就会被触发

语法:transition-property

取值: 1.属性名称

2.none:默认值

3.all

允许设置过渡的属性:1、颜色属性

2、取值为数字的属性

3、转换属性-transform

4、渐变属性

5、visibility

6、阴影属性

(2)指定过渡时长:过渡的效果要在多长时间内完成

属性:transition-duration

取值:以s或ms为单位的数值

默认值为0,意味着不会有过渡效果

(3)指定过渡的速度时间曲线函数

属性:transition-timing-function

取值:

1、ease 默认值,慢速开始,快速变快,慢速结束

2、linear 匀速

3、ease-in 慢速开始,加速结束

4、ease-out 快速开始,减速结束

5、ease-in-out 慢速开始和结束,中间先加后减

(4)指定过渡延迟:当用户激发操作后等待多长时间再显示效果

属性:transition-delay

取值:以s或ms为单位的数值

动画

1、什么是动画

动画指使元素从一种样式逐渐变化为另一种样式的过程

动画是复杂版的过渡效果

本质:使用”关键帧”,来定义动画的每一步

关键帧:包含 运行的时间点以及动作(样式)

2、动画的使用步骤

(1)声明动画

指定动画名称以及涉及到的关键帧们

(2)为元素调用动画

指定元素使用哪个动画效果

3、声明动画

样式表中,通过 @keyframes 规则来声明动画

@keyframes 动画名称{

0%{

/*动画开始时,元素的样式*/

属性:值;

属性:值;

}

50%{

/*动画执行到一半时,元素的样式*/

}

100%{

/*动画结束时,元素的样式*/

}

}

动画声明的浏览器兼容性:

@-moz-keyframes动画名{ … }

@-webkit-keyframes动画名{ … }

@-o-keyframes动画名{ … }

4、调用动画

(1)animation-name:要调用的动画名称

(2)animation-duration:动画完成一个周期需要的时长

取值:以s或ms为单位的数值

(3)animation-timing-function:指定动画的速度时间曲线函数

取值:ease、linear、ease-in,ease-out、ease-in-out

(4)animation-delay:指定动画的播放延迟

(5)animation-iteration-count:指定动画的播放次数

取值:1.默认值为1,只播放一次

2.自定义数值

3.infinite,表示无限次播放

(6)animation-direction:指定动画的播放方向

取值: 1、normal:正向播放,从0%~100%

2、reverse:逆向播放,从100%~0%

3、alternate:轮流播放,基数次数播放时,正向播放,偶数次数播放时,逆向播

(7)animation-flill-mode(不属于简写里)

作用:动画的填充模式,指动画在播放之前或播放之后的显示效果

取值:none 默认值,无任何效果

forwards 当动画播放完成之后,元素将保持在最后一个帧的状态上

backwards 动画播放前,在延迟时间内,动画将保持在第一帧的状态上

both 动画播放前后,分别应用在第一帧和最后一帧的状态上

(8)animation-play-state

作用:指定动画处于 播放状态 还是 暂停状态

取值: paused 动画暂停

running 动画播放

相关文章
最新文章
热点推荐