《Web前端开发基础》 课件 第6章 CSS3动画..pptx
- 文档编号:18941666
- 上传时间:2024-03-23
- 格式:PPTX
- 页数:36
- 大小:322.49KB
《Web前端开发基础》 课件 第6章 CSS3动画..pptx
《《Web前端开发基础》 课件 第6章 CSS3动画..pptx》由会员分享,可在线阅读,更多相关《《Web前端开发基础》 课件 第6章 CSS3动画..pptx(36页珍藏版)》请在冰点文库上搜索。
Web前端开前端开发发基基础础第六章CSS3动画学习内容1.transform变形2.transition过渡动画3.animation关键帧动画4.3D变形动画思维导图6.1transform变形在CSS3之前,要实现元素的平移、旋转、缩放和倾斜效果,需要依赖flash或者javascript脚本程序来实现,而在CSS3中,使用transform变形无需其它额外代码,便可以轻松实现这些效果。
CSS3变形常用有两个属性,transform属性和transform-origion属性,其中transform属性用于设置元素的旋转、缩放、倾斜、移动这4中类型的变形处理,而transform-origion属性用于设置元素变形的基准点。
6.1transform变形
(1)缩放scale使用语法:
transform:
scale(X,Y),scaleX(x)或者scaleY(y)Scale函数只要是针对元素的中心原点位置进行缩放操作,在2D平面中通常包括以下几个函数:
scale(X,Y),使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放),如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的scaleX(x),使元素仅水平方向缩放(X轴缩放)scaleY(y),使元素仅垂直方向缩放(Y轴缩放)默认情况下,根据元素中心原点进行缩放,缩放取值默认值为1,当值小于1时,使一个元素缩小;而大于1时,使元素放大。
6.1transform变形案例:
.boxspanwidth:
100px;height:
100px;border:
1pxsolid#999;background-color:
#FBCA4F;margin:
10px;border-radius:
50%;text-align:
center;line-height:
100px;font-size:
40px;display:
inline-block;.boxspan:
hoverbackground-color:
#61B662;transform:
scale(1.5);6.1transform变形
(2)translate位移使用语法:
transform:
translate(X,Y),translateX(X)或者translateY(Y)translate()函数可以将元素向指定的方向移动,类似于position中的relative,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件,在2D平面中通常包括以下几个函数:
translate(X,Y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)translateX(X)仅水平方向移动(X轴移动)translateY(Y)仅垂直方向移动(Y轴移动)6.1transform变形案例:
.boxspandisplay:
inline-block;width:
200px;height:
100px;background-color:
#FBCA4F;font-size:
40px;text-align:
center;line-height:
100px;margin:
10px;.boxspan:
hoverbackground-color:
#61B662;transform:
translate(-10px,-20px);cursor:
pointer;6.1transform变形(3)rotate旋转使用语法:
transform:
rotate(角度)Rotate旋转方法只有一个参数“角度”,单位deg(度),正数时为顺时针旋转,负数时为逆时针旋转,配合着transform-origin属性,transform-origin是设置旋转基准点的。
(没有设置transform-origin属性也可以,只不过是根据该元素的中心点旋转,也就是centercenter)。
6.1transform变形案例:
.box1background-color:
#61B662;transform:
rotate(45deg);.box2background-color:
#DEDEDE;transform:
rotate(-45deg);6.1transform变形(4)skew倾斜使用语法:
transform:
skew(X轴方向倾斜度数,Y轴方向倾斜度数,skewX(X轴方向倾斜度数)或者skewY(Y轴方向倾斜度数)。
Skew主要用于2D平面中对元素进行倾斜扭曲变换,通常情况下,包括以下几个函数:
skewX(度数),定义沿着x轴的2D倾斜旋转,即在水平方向扭曲变形skewY(度数),定义沿着Y轴的2D倾斜旋转,即在垂直方向扭曲变形Skew(X轴方向度数,Y轴方向度数),定义沿着X轴和Y轴的2D倾斜旋转6.1transform变形案例:
.lidisplay:
inline-block;width:
100px;height:
30px;text-align:
center;background-color:
#FBCA4F;transform:
skew(-30deg);liatext-decoration:
none;display:
block;width:
100px;height:
30px;line-height:
30px;color:
#333;transform:
skew(30deg);6.2transition过渡动画CSS3过渡动画是指元素从一种样式逐渐改变为另一种样式所产生的动画效果。
要实现过渡动画效果,需要指定元素的CSS属性,并指定产生效果的时长,在指定时长内CSS属性值从一个值过渡到另外一个值。
transition过渡动画基本语法:
transition:
属性名持续时间过渡方法。
6.2transition过渡动画transition属性transition-property:
属性的名字(如果是一个属性就带有这个属性的名字;如果是多个属性,属性名之间用逗号隔开;如果是所有属性,用all表示即可)表示对哪个属性进行变化。
transition-duration:
变化持续的时间长度(秒或是毫秒)。
transition-timing-function:
过渡实现的方式(先慢后快/先快后慢),具体实现的时候是以函数来实现的。
transition-timing-function属性取值包括以下几种:
Linear:
匀速(线型过渡)ease:
先慢后快再慢ease-in:
慢速开始的过渡效果ease-out:
慢速结束的过渡效果ease-in-out:
慢速开始和慢速结束的过渡效果transition-delay:
过渡开始前等待的时间,单位为秒或是毫秒。
6.2transition过渡动画
(2)改变元素的状态使用transtion属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。
单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发。
可触发的方式有:
:
hover:
focus:
checked媒体查询触发Javascript触发。
6.2transition过渡动画案例:
.picwidth:
200px;height:
300px;margin:
50pxauto0;position:
relative;overflow:
hidden;background-image:
url(img/head.jpg);background-size:
cover;background-repeat:
no-repeat;background-position:
-150px;.pic_infoposition:
absolute;left:
0;top:
300px;width:
180px;height:
100px;background-color:
rgba(0,0,0,0.3);color:
#fff;padding:
10px;transition:
all500msease;6.3animation关键帧动画在CSS3中,虽然transition也可以实现从一种状态到另一种状态的动画效果,但它只能控制开始和结束的两个点,功能非常有限。
而animation动画除了能控制开始和结束的两个点外,还能通过关键帧来控制动画的每一步,可以实现更为复杂的动画效果。
animation属性是一个简写属性,用于设置六个动画属性,使用方法如下:
animation:
namedurationtiming-functiondelayiteration-countdirection;默认值:
none0ease01normal;6.3animation关键帧动画
(1)animation-name:
规定需要绑定到选择器的keyframe名称,在CSS3中,把keyframes称作关键帧,并使用keyframes来定义动画每一帧的效果,即定义由当前样式逐渐改变为新样式的动画效果。
keyframes有自己的语法规则,它由keyframes开头,后面紧跟动画名称和一对大括号,在大括号中定义每个帧的样式规则keyframes名称from/*关键帧CSS样式*/percentage/*关键帧CSS样式*/to/*关键帧CSS样式*/6.3animation关键帧动画
(2)animation-duration:
规定完成动画所花费的时间,以秒或毫秒计,指定动画完成一个周期所需的时间,默认值为0。
animation-duration:
6sanimation-duration:
120msanimation-duration:
1s,15sanimation-duration:
10s,30s,230ms单个参数表示指定动画完成一个周期的时间,如果有多个参数,中间用逗号隔开,依次为指定关键帧动画执行的时间6.3animation关键帧动画(3)animation-timing-function:
规定动画的速度曲线,常用的函数如下:
ease默认。
动画以低速开始,然后加快,在结束前变慢。
linear:
动画从头到尾的速度是相同的。
ease-in:
动画以低速开始。
ease-out:
动画以低速结束。
ease-in-out:
动画以低速开始和结束。
6.3animation关键帧动画(4)animation-delay:
规定在动画开始之前的延迟,值以秒或毫秒计,默认值为0。
但是在这里需要注意,如果指定为负值,则是跳过开始延迟时间进入动画。
比如以下代码:
animation-delay:
-2s;此时会跳过2s进入动画,也就是前2秒钟动画不执行,如果和无限次循环动画,只是第一次动画跳过2秒,从第二个动画周期开始仍然从起始位置开始6.3animation关键帧动画4animation-delay:
规定在动画开始之前的延迟,值以秒或毫秒计,默认值为0。
但是在这里需要注意,如果指定为负值,则是跳过开始延迟时间进入动画。
比如以下代码:
animation-delay:
-2s;此时会跳过2s进入动画,也就是前2秒钟动画不执行,如果和无限次循环动画,只是第一次动画跳过2秒,从第二个动画周期开始仍然从起始位置开始5animation-iteration-count:
规定动画应该播放的次数,默认值为1,也可以指定循环次数,如果设置为infinite,则表示无限次循环。
6.3animation关键帧动画6animation-direction:
规定是否应该轮流反向播放动画,常用参数值如下:
normal:
以正常的方式播放动画。
reverse:
以相反方向播放动画。
alternate:
播放动画作为正常每奇数时间(1,3,5等)和反方向每偶数时间(2,4,6,等.)。
alternate-reverse:
在每个奇数时间(1,3,5等)在相反方向上播放动画,并且在每个偶数时间(2,4,6等等)的正常方向上播放动画。
除了以上6个属性外,还有两个属性用来设置动画的状态控制,分别为animation-fill-mode和animation-play-state。
7animation-fill-mode:
当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式,常用属性值如下:
none默认值,动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards,在动画结束后(由animation-iteration-count决定),动画将应用该属性值。
backwards,动画将应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值。
both动画遵循forwards和backwards的规则。
也就是说,动画会在两个方向上扩展动画属性。
(8)animation-play-state:
表示动画的状态,默认值为running,表示正在运动,paused为暂停6.43D变形动画CSS33D模型6.43D变形动画
(1)transform3D旋转属性transform3D旋转属性新增了3个变形函数,分别是rotateX()、rotateY()、rotateZ()。
rotateX():
对应的是3D模型中的X轴上的旋转,传入的参数如:
rotateX(60deg)表示的是元素绕X轴顺时针旋转60度。
rotateX():
对应的是3D模型中的Y轴上的旋转,传入的参数如:
rotateY(60deg)表示的是元素绕Y轴顺时针旋转60度。
rotateX():
对应的是3D模型中的Z轴上的旋转,传入的参数如:
rotateZ(60deg)表示的是元素绕Z轴顺时针旋转60度。
rotate3D(x,y,z,a),其中x是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;y是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;z:
是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;a:
是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
6.43D变形动画案例.box1background-color:
#800080;transform:
rotateX(60deg);.box2background-color:
#FFA500;transform:
rotateY(60deg);.box3background-color:
#999;transform:
rotateZ(60deg);6.43D变形动画
(2)transform3D平移属性transform3D平移属性新增了translateX(),tanslateY()和tanslateZ()这三个函数。
translateX(),在X轴方向平移,正值向右,负值向左translateY(),在Y轴方向平移,正值向下,负值向上translateZ(),在Z轴方向平移,正值向眼睛方向,负值向屏幕里面translate3D(x,y,z),同时设置3个方向坐标值6.43D变形动画案例divtransform-style:
preserve-3d;divimgwidth:
300px;height:
400px;divimg:
nth-child
(1)position:
absolute;divimg:
nth-child
(2)position:
absolute;transform:
translate3d(90px,60px,200px);6.43D变形动画(3)transform3Dscale属性transform3Dscale属性新增了scale3d()和scaleZ()函数。
scale3d(x,y,z),其中z为Z轴的缩放比例,取值同x,y一样,在0.010.99时元素缩小,1时大小不变,大于1时元素变大。
scaleZ等价于scale(1,1,z),Z轴缩放比例。
如果单独使用scale3d或scaleZ不会有任何效果,需要配合其他属性在3D舞台上才能出现效果。
6.43D变形动画案例.wrapperwidth:
600px;height:
600px;position:
relative;transform-style:
preserve-3d;.boxwidth:
200px;height:
200px;position:
absolute;left:
200px;top:
200px;background-color:
#A8A89B;opacity:
.4;border:
1pxsolid#333333;.box1width:
200px;height:
200px;position:
absolute;left:
200px;top:
200px;background-color:
#61B662;transform:
perspective(400px)rotateX(80deg)scaleZ
(2)translateZ(-50px);6.43D变形动画(4)perspectiveperspective属性定义镜头到元素平面的距离。
所有元素都是放置在z=0的平面上,为元素及其内容应用透视变换。
当值为0或负值时,无透视变换。
当z0的三维元素比正常大,而z0时则比正常小,大小程度由该属性的值决定。
三维元素在观察者后面的部分不会绘制出来,即z轴坐标值大于perspective属性值的部分。
而perspective属性需要结合perspective-origin属性来确定镜头在平面上的位置,默认是放在元素的中心。
对于perspective-origion属性常用参数如下:
使用值来指定固定的偏移距离。
偏移的位置从元素左上角开始。
第一个值代表水平偏移,第二个值代表垂直偏移。
:
使用值来指定偏移距离。
第一个值代表水平偏移,百分比值相对于borderbox的宽度来计算。
第二个值代表垂直偏移,百分比值相对于borderbox的高度来计算。
偏移的位置从元素左上角开始。
left:
关键字,代表水平位置的0%。
right:
关键字,代表水平位置的100%。
top:
关键字,代表垂直位置的0%。
bottom:
关键字,代表垂直位置的100%。
center:
如果水平位置没有特别指定,代表水平位置的50%,或者垂直位置没有特别指定,代表垂直位置的50%。
如果指定的值大于2个,并且没有关键字,或者仅使用了center关键字,那么第一个值代表水平位置,第二个值代表垂直位置。
如果仅仅指定了一个值,那么第二个值会被设置为center。
6.43D变形动画案例.wrapperwidth:
600px;height:
600px;transform-style:
preserve-3d;perspective:
400px;position:
relative;perspective-origin:
left.box1width:
200px;height:
200px;position:
absolute;background-color:
#999999;left:
100px;top:
200px;opacity:
.6;.box2width:
200px;height:
200px;position:
absolute;transform:
rotateY(90deg);background-color:
#61B662;left:
100px;top:
200px;6.43D变形动画.boximgwidth:
100%;height:
100%;position:
absolute;transition:
transformease2s;.boximg:
first-childz-index:
1;backface-visibility:
hidden;.box:
hoverimgtransform:
rotateY(180deg);(5)backface-visibilitybackface-visibility属性定义当元素不面向屏幕时是否可见。
其常用属性值如下:
visible:
指定背面是可见的,允许正面镜像显示。
这是默认值。
hidden:
指定背面不可见,隐藏正面。
案例:
.boxwidth:
300px;height:
200px;margin:
100pxauto;position:
relative;border:
1pxsolidpink;6.43D变形动画综合案例结合CSS3关键帧动画和transform变换动画,制作一个旋转的立方体,立方体有6个面,分别为“front”,“back”,“left”,“right”,“top”和“bottom”。
先使用6个div容器组成一个立方体,然后在使用关键帧动画让立方体旋转起来,代码参见教材。
6.5本章小结transform(变形)相关属性及函数的应用transition(过渡动画)相关属性的设置及应用animation(关键帧动画)相关属性的设置及应用休息一下吧
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web前端开发基础 Web前端开发基础 课件 第6章 CSS3动画. Web 前端 开发 基础 CSS3 动画