《web前端技术》课件-第八章_第1页
《web前端技术》课件-第八章_第2页
《web前端技术》课件-第八章_第3页
《web前端技术》课件-第八章_第4页
《web前端技术》课件-第八章_第5页
已阅读5页,还剩65页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

Web前端技术签到扫码下载文旌课堂APP扫码签到签到方式教师通过“文旌课堂APP”生成签到二维码,并设置签到时间,学生通过“文旌课堂APP”扫描“签到二维码”进行签到。CSS3高级应用第八章使用CSS3提供的属性不仅可以设置元素的样式,还可以实现动态特效,如变形效果、过渡效果和动画效果等。本章将对变形效果、过渡效果和动画效果的相关知识进行详细介绍。章节导读熟悉变形效果的相关知识,包括变形属性、2D变形和3D变形。熟悉过渡效果的相关属性,了解常见过渡效果的应用场景及触发方式。熟悉关键帧和动画效果的相关属性,能够制作动画片段。学习目标学习CSS3高级应用,拓宽视野,提高专业技能。提高对事物的观察和归纳总结能力,养成好的编程习惯和思维方式。素质目标第八章CSS高级应用/章节导航/8.1变形效果8.2

过渡效果8.3动画效果实战演练——制作北极熊走路动画片段变形效果8.1早期的CSS版本仅支持设置元素样式而无法实现变形效果,要实现变形效果只能依赖于JavaScript。随着CSS的发展,CSS3中新增了transform属性用于设置元素的2D和3D变形效果,具体格式为:其中,none是默认值,表示无变形效果;transform-functions表示变形方法,用于设置元素的2D或3D变形效果。变形方法可以有多个,不同的变形方法之间用空格隔开。8.1变形效果transform:none|transform-functions;8.18.1.12D变形以元素中心为原点创建一个二维坐标系,如图所示。沿坐标系中的x轴或y轴对元素进行调节产生的变形效果称为2D变形。在CSS3中,2D变形主要包括4种变形效果,分别为平移、缩放、旋转和倾斜。变形效果以元素中心为原点创建二维坐标系8.11.平移CSS3中,使用translate()方法能够重新定义元素在二维坐标系中的坐标,实现平移变形,具体格式为:其中,length-x与length-y分别表示元素在x轴与y轴方向上移动的距离,参数值为正负数值与单位或者百分比。如果只设置一个参数值,则第二个参数值默认为0。此外,在CSS3中,使用translateX(length)和translateY(length)方法可以分别针对x轴和y轴设置元素的平移效果。变形效果transform:translate(length-x,length-y);8.12.缩放在CSS3中,使用scale()方法能够使元素的宽度与高度按比例放大或缩小,实现缩放变形,具体格式为:其中,times-x与times-y分别表示元素宽度与高度的缩放倍数,参数值大于1表示按比例放大,参数值小于1则表示按比例缩小。如果只设置一个参数值,则表示同时设置宽度与高度的缩放比例。当参数值为负数时,元素将会翻转显示。例如,当times-x设置为负数时,缩放后的元素将以y轴为基准水平翻转。变形效果transform:scale(times-x,times-y);8.13.旋转在CSS3中,使用rotate(

)方法能够使元素以原点为中心顺时针或逆时针转动一定角度,实现旋转变形,具体格式为:其中,angle表示旋转的角度,如30deg。deg为角度的单位,表示度。当参数值为正值时,元素按顺时针旋转,反之则按逆时针旋转。变形效果transform:rotate(angle);8.14.倾斜在CSS3中,使用skew()方法能够使元素沿着y轴和x轴倾斜一定角度,实现倾斜效果,具体格式为:其中,angle-y与angle-x分别表示元素沿着y轴和x轴的倾斜角度,如图所示。参数值可以为正值,也可以为负值,单位为deg。如果只设置一个参数值,则表示设置沿y轴倾斜,且第二个参数为0。变形效果transform:skew(angle-y,angle-x);skew()方法与rotate()方法的不同之处是rotate()方法只是旋转元素,不会改变元素的形状,而skew()方法会改变元素的形状。超链接skew()方法中,若元素仅沿着y轴倾斜,元素x轴方向上的边不倾斜,y轴方向上的边倾斜一定的角度,如图所示。反之,若元素仅沿着x轴倾斜,元素y轴方向上的边不倾斜,x轴方向上的边倾斜一定的角度,如图所示。zhIDIANMIJIN指点迷津8.1变形效果元素沿着y轴倾斜效果示意图元素沿着x轴倾斜效果示意图超链接在CSS3中,还新增了专门针对x轴或y轴进行2D变形设置的方法。zhISHIku知识库8.1变形效果#d1{transform:translate(20px,30px);/*设置元素在x轴与y轴方向上移动的距离分别为20px和30px*/}#d2{transform:scale(-1.2,0.8);/*设置元素的宽度按比例放大1.2倍并翻转显示,高度按比例缩小0.8倍*/}#d3{transform:rotate(20deg);/*设置元素以原点为中心顺时针转动20度*/}#d4{transform:skew(-30deg,10deg);/*设置元素沿着y轴和x轴分别倾斜-30度和10度*/}【例8-1】

为元素设置2D变形效果,包括平移、缩放、旋转、倾斜等(以下提供部分代码)。8.1变形效果【例8-1】

页面效果如图所示。设置2D变形效果后的页面效果8.1变形效果8.18.1.2

3D变形以元素中心为原点,创建一个三维坐标系,如图所示。沿坐标系中的x轴、y轴和z轴对元素进行调节产生的变形效果称为3D变形。在CSS3中,3D变形主要包括3种变形效果,分别为平移、缩放和旋转。变形效果以元素中心为原点创建三维坐标系CSS3中,使用translate3d()方法可以重新定义元素在三维坐标系中的坐标,实现平移变形,具体格式为:8.11.平移变形效果transform:translate3d(length-x,length-y,length-z);x轴移动距离y轴移动距离z轴移动距离只能是正负数值正负数值与单位或者百分比值越大视觉上元素越大8.12.缩放在CSS3中,使用scale3d()方法能够使元素在x轴、y轴和z轴上按比例放大或缩小,实现缩放变形,具体格式为:变形效果transform:scale3d(times-x,times-y,times-z);x轴缩放倍数y轴缩放倍数z轴缩放倍数>1,放大;<1,缩小;为负值,翻转8.13.旋转在CSS3中,使用rotateX()、rotateY()和rotateZ()方法能够使元素分别围绕x轴、y轴和z轴顺时针或逆时针转动一定角度,实现旋转变形,具体格式为:此外,在CSS3中还有一个可以指定旋转轴的rotate3d()方法,具体格式为:变形效果transform:rotateX(angle)|rotateY(angle)|rotateZ(angle);transform:rotate3d(length-x,length-y,length-z,angle);旋转的角度,单位为deg;参数值为正,顺时针旋转,为负,逆时针旋转共同确定一个坐标,原点与该点连接构成一个向量,代表元素的旋转轴,指定了旋转的方向超链接在CSS3中,还新增了专门针对z轴进行3D变形设置的方法zhISHIku知识库8.1变形效果<style>div{width:200px;height:150px;font-size:1.5em;font-weight:bold;text-align:center;display:inline-block;}.dy{margin:30px;border:dashed3px#55738F;perspective:300px;/*为3D变形元素定义透视视图*/}.dn{background-color:rgba(201,202,250,0.8);}#d1{transform:translate3d(20px,30px,-80px);/*设置元素在x轴、y轴和z轴方向上分别移动20px、30px、-80px*/}#d2{transform:scale3d(1.2,0.8,-3)rotateX(20deg);/*设置元素在x轴、y轴和z轴上的缩放倍数分别为1.2、0.8、-3,同时设置元素以x轴为旋转轴旋转20度*/}#d3{transform:rotateX(20deg);/*设置元素以x轴为旋转轴旋转20度*/}【例8-2】

为元素设置3D变形效果,包括平移、缩放、旋转等(以下提供部分代码)。8.1变形效果【例8-2】

为元素设置3D变形效果,包括平移、缩放、旋转等(以下提供部分代码)。</style><body> <divclass="dy"> <divclass="dn">3D变形效果原图</div> </div> <divclass="dy"> <divid="d1"class="dn">3D变形效果平移</div> </div> <divclass="dy"> <divid="d2"class="dn">3D变形效果缩放</div> </div> <divclass="dy"> <divid="d3"class="dn">3D变形效果旋转</div> </div></body>8.1变形效果【例8-2】

页面效果如图所示。设置3D变形效果后的页面效果8.1变形效果超链接设置3D缩放变形效果的scale3d()和scaleZ()方法单独使用时没有任何视觉效果,需要配合其他变换方法一起使用才会显示不同的视觉效果,如例8-2中将scale3d()方法与rotateX()方法搭配使用。Gaoshoudianbo高手点拨8.1变形效果超链接设置3D变形时,一般需要为设置变形的元素的父元素设置透视属性perspective。透视是绘画理论术语,是在平面上根据一定原理用线条来显示物体的空间位置、轮廓和投影的科学,根据透视关系能够绘制出带有空间结构的透视图,生活中常说的“近大远小”就是其中的一个简单的原理。CSS3中的透视属性可以理解为设置“近大远小”的程度,属性值越小靠近人眼的一侧就显示得越大,一般设置为300px。该属性的默认属性值为0,即不显示透视,此时3D变形效果类似于2D变形效果。TUOZHANYUEDU拓展阅读8.1变形效果过渡效果8.28.28.2.1过渡效果的相关属性元素样式从一个状态向另一个状态缓慢平滑地变化的过程称为过渡效果。本节将详细介绍实现过渡效果的相关属性,以及常见过渡效果的触发方式。过渡效果使用CSS3提供的transition-property、transition-duration、transition-timing-function、transition-delay等属性,能够在不使用Flash与JavaScript的情况下设置元素的过渡效果,下面对这些属性进行详细介绍。8.21.设置过渡属性在CSS3中,使用transition-property属性设置应用过渡效果的CSS属性名称,具体格式为:过渡效果transition-property:none|all|property;默认值,不应用过渡效果所有属性应用过渡效果应用过渡效果的具体属性名称,可设置多个,用逗号间隔8.22.设置过渡时间CSS3中,使用transition-timing-function属性设置过渡效果的速度曲线,具体格式为:其中,各属性值的说明如下表所示。过渡效果transition-timing-function:cubic-bezier(n,n,n,n)|liner|ease|ease-in|ease-out|ease-in-out;8.22.设置过渡时间过渡效果属性值说明cubic-bezier(n,n,n,n)贝塞尔曲线,用于精确设置过渡效果的速度曲线,n的取值范围为0~1linear线性过渡,即以相同速度开始至结束的过渡效果,等同于cubic-bezier(0,0,1,1)ease平滑过渡,即慢速开始,然后变快,然后慢速结束的过渡效果,等同于cubic-bezier(0.25,0.1,0.25,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)

transition-timing-function属性值及说明超链接贝塞尔曲线参数值的大小与速度效果的联系并不直观,直接设置参数值不一定能够得到期望的效果,所以设置贝塞尔曲线的参数值时,可以使用浏览器的开发者工具进行设置,下面介绍具体步骤。步骤1此处以Chrome浏览器为例,使用该浏览器打开“素材与案例\第8章\function.html”文档,该文档中已经创建好添加了过渡效果的div元素。XIAOJIQIAO小技巧8.2过渡效果超链接步骤2按“F12”键打开“开发者工具”窗格,在“Elements”选项卡中单击div元素的代码行,在下方的“Styles”选项卡中单击“:hov”所在区域,在展开的面板中勾选“:hover”复选框,改变div元素的状态,如图所示。XIAOJIQIAO小技巧8.2过渡效果改变div元素的状态超链接步骤3再次单击“:hov”所在区域,收起面板。此时“Styles”选项卡中显示出div:hover{…}的代码,单击代码“ease”前的贝塞尔曲线按钮,打开贝塞尔曲线调节窗口,在窗口中移动曲线两侧的圆形控制点能够动态调节代码中的属性值,窗口上方的一行圆点轨迹表示过渡效果的速度,圆点间隔越大的时间点过渡速度越快,如图所示。XIAOJIQIAO小技巧8.2过渡效果打开贝塞尔曲线调节窗口超链接步骤4

调节完成后,再次单击贝塞尔曲线按钮,关闭贝塞尔曲线调节窗口,将自动生成的属性值复制到文档中对应位置并保存即可。XIAOJIQIAO小技巧8.2过渡效果8.24.设置延迟时间在CSS3中,使用transition-delay属性设置过渡效果何时开始,具体格式为:例如,有一个时长为5秒的过渡效果A,A的变化过程可看作一个时长为5秒的动画片段,在此基础上设置延迟时间为-2秒,则表示当该过渡效果触发时,A将直接从第2秒开始播放直至结束(默认过渡效果是从第0秒开始播放)。过渡效果transition-delay:time;等待时间,单位s或ms;默认值0,>0,等待时间之后开始;<0,在该时间之前截断。8.2过渡效果超链接CSS3中,使用transition属性可以在一个声明中设置过渡效果的各个属性,具体格式为:其中,属性值的顺序不可颠倒。实现多个过渡效果时,每组属性值用逗号隔开。ZhIshituozhan知识拓展transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;8.28.2.2过渡效果的触发方式在CSS3中,常通过鼠标事件触发过渡效果,如单击按钮、鼠标指针经过等。下面介绍几种过渡效果常见的触发方式。过渡效果8.28.2.2过渡效果的触发方式此外,媒体查询响应时也能够触发过渡效果。例如,以下代码表示当屏幕最大宽度为420px时,div元素的宽度变为100px,该过程应用时长为1秒的过渡效果。过渡效果@mediaonlyscreenand(max-width:420px){div{width:100px;}}div{width:200px;height:100px;transition:width1s;}【例8-3】

为元素设置过渡效果,包括过渡属性、过渡时间、过渡的速度曲线和延迟时间等(以下提供部分代码)。8.2过渡效果#d1{transition-property:border-radius;

/*设置应用过渡效果的CSS属性名称为border-radius*/

transition-duration:5s;

/*设置完成过渡效果需要花费的时间为5秒*/

transition-timing-function:ease;

/*设置过渡效果的速度曲线为ease*/

transition-delay:1s;/*设置过渡效果等待1秒后开始*/}

#d1:hover{border-radius:155px;}/*设置鼠标指针经过时触发过渡效果*/【例8-3】

页面效果如图所示。8.2过渡效果设置过渡效果后的页面效果动画效果8.3制作动画效果必须先设置关键帧,一个关键帧代表动画变化过程中的一个状态。在CSS3中,使用@keyframes规则定义关键帧,具体格式为:8.38.3.1关键帧使用transition属性只能在一个开始值与一个结束值之间添加过渡效果,无法设置中间值,而CSS3中的动画功能不仅可以制作出过渡效果,还可以通过设置关键帧制作变化多样的动画效果。动画效果@keyframesname{selector{css-styles;}}动画名称关键帧的时间位置(动画时长的百分比),from(等价于0%),to(等价于100%)对应关键帧的样式属性在CSS3中,使用animation-name属性设置要应用的动画效果名称,具体格式为:其中,name表示动画效果名称,其取值是想要应用的@keyframes动画名称;none表示不应用或取消动画。要想实现动画效果,在定义了关键帧之后,就需要使用动画效果的相关属性来控制关键帧的变化。CSS3为实现动画效果提供了一些属性,下面对这些属性进行详细介绍。8.38.3.2动画效果的相关属性动画效果animation-name:name|none;1.设置动画名称在CSS3中,使用animation-duration属性设置动画效果播放一次的时长,具体格式为:其中,time表示完成动画效果所花费的时间,单位一般为s或ms。默认值是0,意味着没有动画效果。8.3动画效果animation-duration:time;2.设置动画时间在CSS3中,使用animation-timing-function属性设置动画效果的速度曲线,具体格式为:其中,属性值的含义和设置方法与transition-timing-function的属性值类似。animation-timing-function:cubic-bezier(n,n,n,n)|liner|ease|ease-in|ease-out|ease-in-out;3.设置动画的速度曲线8.3动画效果超链接此外,animation-timing-function属性值还可以设置为steps(number,start|end)方法。它用于设置两个关键帧之间插入多少帧补间动画,参数number表示帧数,值为正整数;参数start表示最后一帧是补间动画的开始;end表示第一帧是补间动画的开始。当不使用steps()方法时,关键帧之间的补间动画由浏览器自动填充。此处的补间动画是指相邻两个关键帧之间的过渡过程,该过程由几步完成,就称补间动画有几帧,也就是参数number的值。ZhIshituozhan知识拓展在CSS3中,使用animation-delay属性设置动画效果何时开始,具体格式为:8.3动画效果animation-delay:time;4.设置延迟时间在CSS3中,使用animation-iteration-count属性设置动画效果播放的次数,具体格式为:animation-iteration-count:number|infinite;5.设置播放次数播放次数,取正整数,默认值为1循环播放8.3动画效果在CSS3中,使用animation-direction属性设置动画效果的播放方向,具体格式为:animation-direction:normal|alternate;6.设置播放方向默认值,动画效果正常播放先正常播放一次,再反向播放一次,以该规律轮流播放8.3动画效果超链接与transition属性类似,在CSS3中,使用animation属性可以在一个声明中设置动画效果的各个属性,包括动画名称、时间、速度曲线、延迟时间、播放次数和播放方向,具体格式为:其中,animation-name和animation-duration的值必须设置,否则无法播放动画。ZhIshituozhan知识拓展animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation_x0002_direction;8.3动画效果在CSS3中,使用animation-play-state属性设置动画效果的状态,如暂停、播放,具体格式为:其中,paused表示动画效果已暂停;running表示动画效果正在播放。animation-play-state:paused|running;7.设置播放状态8.3动画效果在CSS3中,使用animation-fill-mode属性设置动画效果播放外(如播放之前或之后)的状态,具体格式为:animation-fill-mode:none|forwards|backwards|both;8.设置播放外状态不设置动画效果之外的状态当动画效果完成后,保持结束时的属性(在最后一个关键帧中定义)指定的一段时间内,以及在动画效果显示前,应用开始时的属性(在第一个关键帧中定义)属性值forwards和backwards的综合【例8-3】为元素设置动画效果,包括关键帧、动画名称、动画时间、动画的速度曲线、延迟时间、播放次数等(以下提供部分代码)。8.3动画效果img{width:150px;

padding:15px;

position:relative;

/*设置元素的定位类型为相对定位*/

animation-name:move;

/*设置要应用的动画效果名称为move*/

animation-duration:4s;

/*设置动画效果播放一次的时长为4秒*/

animation-timing-function:liner;

/*设置动画效果的速度曲线为liner*/

animation-delay:2s;

/*设置动画效果等待2秒后开始*/

animation-iteration-count:2;

/*设置动画效果播放2次*/

animation-direction:alternate;

/*设置动画效果轮流反向播放*/

animation-play-state:running;

/*设置动画效果播放的状态为正在播放*/

animation-fill-mode:both;

/*设置动画效果播放之前和之后的状态*/}【例8-3】为元素设置动画效果,包括关键帧、动画名称、动画时间、动画的速度曲线、延迟时间、播放次数等(以下提供部分代码)。@keyframesmove{/*定义关键帧的动画效果名称为move*/0%{left:0px;background-color:#d6d6a0;}

/*设置时间处于动画时长的开始时,左边距离为0px,背景颜色为#d6d6a0*/25%{left:100px;}/*设置时间处于动画时长的25%时,左边距离为100px*/50%{left:200px;}/*设置时间处于动画时长的50%时,左边距离为200px*/75%{left:300px;}/*设置时间处于动画时长的75%时,左边距离为300px*/100%{left:400px;}/*设置时间处于动画时长的100%时,左边距离为400px*/}8.3动画效果【例8-3】页面效果如图所示。设置动画效果后的页面效果8.3动画效果超链接使用关键帧不仅能够实现元素的动态效果,还能结合图像元素与背景属性等制作动画片段。下面带领大家一起制作北极熊走路动画片段,页面效果如图所示。——制作北极熊走路动画片段实战演练WEB扫一扫超链接步骤1

在HBuilderX中导入本书配套素材“素材与案例\第8章\实战演练”文件夹,然后打开“8.3.html”文档,该文档中已经创建好div元素并为其设置了背景图像,此时页面效果如图所示。——制作北极熊走路动画片段实战演练WEB未设置动画的页面效果超链接步骤2

定义关键帧。“8.3.html”文档中的div元素就是帧动画的“舞台”,使用关键帧设置其背景图像显示位置的变化,就能够制作出北极熊原地走路的动画效果,其中该动画使用的背景图像(宽度为1000px)如图所示。

因此,在“8.3.html”文档的<style>…</style>标签中添加以下代码,设置开始和结束的关键帧及样式。——制作北极熊走路动画片段实战演练WEB@keyframesmove{0%{background-position:00;}/*设置第一个关键帧的背景图像显示位置*/100%{background-position:-1000px0;}/*设置第二个关键帧的背景图像显示位置向左侧移动1000px*/}div元素的背景图像超链接步骤3

设置动画效果。该动画共8个动作,每个动作对应的背景图像区域占总宽度的八分之一,可设置该动画开始与结束关键帧之间共移动8次(浏览器自动将背景图像的移动过程分8次完成,每次移动125px)。因此,在“8.3.html”文档<style>…</style>标签中的div{…}最后面添加以下代码,为div元素应用动画效果,此时页面效果如图所示。——制作北极熊走路动画片段实战演练WEBanimation:move1ssteps(8,end)infinite;/*为div元素应用动画move,时长为1秒,两个关键帧之间共8帧,以第一帧为动画开始,循环播放*/本章主要介绍了CSS3高级应用的相关知识。通过本章的学习,读者应重点掌握以下内容。(1)CSS3中新增的transform属性可用于设置元素的2D和3D变形效果。(2)在CSS3中,2D变形主要包括平移、缩放、旋转和倾斜4种效果,分别使用方法translate()、scale()、rotate()和skew()实现。(3)在CSS3中,3D变形主要包括平移、缩放和旋转3种效果。其中,平移、缩放分别使用方法translate3d()、scale3d()实现,旋转可使用方法rotateX()、rotateY()和rotateZ()实现。本章小结(4)在CSS3中,使用transition-property、transition-duration、transition-timing-function、transition-delay属性可以设置过渡属性、过渡时间、过渡的速度曲线和延迟时间,实现元素的过渡效果。(5)在CSS3中,使用@keyframes规则定义关键帧,使用animation-name、animation_x0002_duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode属性设置动画名称、动画时间、动画的速度曲线、延迟时间、播放次数、播放方向、播放状态和播放外状态,实现元素的动画效果。本章小结超链接课堂练习WEB(1)关于变形属性的变形方法,下列叙述正确的是(

)。

A.rotate(

)为平移方法,可以重新设置元素的位置

B.scale(

)为缩放方法,可以改变元素的尺寸

C.skew(

)为旋转方法,可以旋转一个角度

D.translate(

)为倾斜方法,可以使元素倾斜一个角度(2)关于过渡效果的设置,下列叙述错误的是(

)。

A.仅使用CSS3无法实现过渡效果

B.transition-duration属性用于设置过渡时间

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论