HTML5+CSS3+JavaScript網(wǎng)頁(yè)開(kāi)發(fā)實(shí)戰(zhàn) 課件 模塊8 企業(yè)官網(wǎng)首頁(yè)廣告欄動(dòng)畫(huà)設(shè)計(jì)

模塊8企業(yè)官網(wǎng)首頁(yè)廣告欄動(dòng)圖設(shè)計(jì)本模塊主要介紹CSS屬性過(guò)渡與動(dòng)畫(huà)設(shè)計(jì)，使讀者掌握CSS過(guò)渡動(dòng)畫(huà)與關(guān)鍵幀動(dòng)畫(huà)設(shè)計(jì)方法。本任務(wù)主要講解animation屬性的使用方法，幫助讀者掌握CSS關(guān)鍵幀動(dòng)畫(huà)設(shè)計(jì)，并進(jìn)行廣告圖動(dòng)畫(huà)效果設(shè)計(jì)。廣告圖切換效果設(shè)計(jì)任務(wù)1任務(wù)概述本模塊主要介紹CSS屬性過(guò)渡與動(dòng)畫(huà)設(shè)計(jì)，使讀者掌握CSS過(guò)渡動(dòng)畫(huà)與關(guān)鍵幀動(dòng)畫(huà)設(shè)計(jì)方法。任務(wù)1廣告圖切換效果設(shè)計(jì)1.1transition屬性CSS3過(guò)渡是元素從一種樣式逐漸變?yōu)榱硪环N樣式的效果。使用過(guò)渡屬性可以讓W(xué)eb前端開(kāi)發(fā)人員在不使用Flash和JavaScript的情況下，輕松實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果。過(guò)渡屬性主要包括transition-property、transition-duration、transition-timing-function、transition-delay。1.1.1transition-duration屬性transition-duration屬性用于規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)），默認(rèn)值為0秒。該屬性可以指定多個(gè)過(guò)渡時(shí)長(zhǎng)，每個(gè)過(guò)渡時(shí)長(zhǎng)都會(huì)被應(yīng)用到由transition-property屬性指定的對(duì)應(yīng)屬性上。transition-timing-function屬性用于規(guī)定過(guò)渡效果的速度曲線(xiàn)。該屬性允許過(guò)渡效果跟隨時(shí)間的變化來(lái)改變運(yùn)動(dòng)速度，其取值如下表所示：

IP地址1.1.2transition-timing-function屬性值描述linear規(guī)定從開(kāi)始至結(jié)束使用相同速度的過(guò)渡效果，等同于

cubic-bezier(0,0,1,1)ease規(guī)定以慢速開(kāi)始，之后速度變快，最后以慢速結(jié)束的過(guò)渡效果，等同于cubic-bezier(0.25,0.1,0.25,1)ease-in規(guī)定以慢速開(kāi)始的過(guò)渡效果，等同于

cubic-bezier(0.42,0,1,1)ease-out規(guī)定以慢速結(jié)束的過(guò)渡效果，等同于

cubic-bezier(0,0,0.58,1)ease-in-out規(guī)定以慢速開(kāi)始和結(jié)束的過(guò)渡效果，等同于

cubic-bezier(0.42,0,0.58,1)cubic-bezier(n,n,n,n)在

cubic-bezier()

函數(shù)中定義自己的值?？赡艿闹禐?/p>

0

和

1

之間的數(shù)1.1.3transition-property屬性transition-property屬性用于規(guī)定應(yīng)用過(guò)渡效果的CSS屬性名稱(chēng)其取值如下表所示：值描述nope沒(méi)有屬性會(huì)獲得過(guò)渡效果all所有屬性都將獲得過(guò)渡效果property定義應(yīng)用過(guò)渡效果的

CSS

屬性名稱(chēng)列表，列表項(xiàng)以逗號(hào)分隔

transition-delay屬性用于規(guī)定過(guò)渡效果何時(shí)開(kāi)始，默認(rèn)屬性值為0。transition-delay屬性值以秒或毫秒計(jì)，取值可以為正數(shù)、負(fù)數(shù)和0。當(dāng)設(shè)置為正數(shù)n（單位為秒）時(shí)，過(guò)渡效果將延遲n秒觸發(fā)，當(dāng)設(shè)置為負(fù)數(shù)-n（單位為秒）時(shí)，前n秒的過(guò)渡效果將被截?cái)?。域?.1.4transition-delay屬性

transition屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置以下4個(gè)過(guò)渡屬性：transition-property、transition-duration、transition-timing-function、transition-delay，且書(shū)寫(xiě)順序不能有誤。transition屬性可以設(shè)置多組過(guò)渡屬性，每組過(guò)渡屬性之間使用逗號(hào)分隔。例如：1.1.5transition屬性<style>.box{width:100px;height:100px;background:coral;}.box:hover{width:200px;height:200px;transition:width2slinear,height3sease-in-out1s;}</style><divclass="box"></div>

transform屬性允許用戶(hù)旋轉(zhuǎn)、縮放、傾斜或平移網(wǎng)頁(yè)元素，其主要變化形式有2D變形和3D變形。HTTP與HTTPS1.2transform屬性transform屬性的2D變形主要包括旋轉(zhuǎn)、縮放、平移和傾斜4種。1.2.12D變形（1）旋轉(zhuǎn)。rotate()方法能夠根據(jù)給定的角度順時(shí)針或逆時(shí)針旋轉(zhuǎn)元素。例如，將div元素逆時(shí)針旋轉(zhuǎn)30°：<style>div{width:357px;height:323px;background:url(tree.jpg)no-repeat;transition:transform1s;}div:hover{transform:rotate(-30deg);/*deg為角度單位（度）*/}</style><div></div>rotate()方法的旋轉(zhuǎn)效果HTML1.2.12D變形（2）縮放。scale()方法能夠根據(jù)給定的寬度和高度參數(shù)增大或減小元素的大小。

需要注意的是，div元素內(nèi)的文字也將隨著容器一同變形。如果需要單獨(dú)對(duì)元素的寬度、高度進(jìn)行變形，則可以使用scaleX()、scaleY()方法。如果給定的參數(shù)為百分比值，則指的是基于元素本身寬高的百分比值進(jìn)行縮放。<style>.man{transform:scaleX(-1);}</style><imgclass="man"src="runman.gif"alt="跑動(dòng)的小人">scaleX()方法的翻轉(zhuǎn)效果（3）平移。translate()方法能夠根據(jù)為X軸和Y軸指定的參數(shù)，實(shí)現(xiàn)元素的平移效果。如果給定的參數(shù)為百分比值，則指的是基于元素本身寬高的百分比值進(jìn)行平移。translate()方法允許給定負(fù)值。如果需要單獨(dú)對(duì)X軸、Y軸進(jìn)行平移，則可以使用translateX()、translateY()方法。（4）傾斜。skew()方法能夠使元素沿X和Y軸給定角度進(jìn)行傾斜。skew()方法允許給定負(fù)值。如果需要單獨(dú)對(duì)X軸、Y軸進(jìn)行傾斜，則可以使用skewX()、skewY()方法。Web標(biāo)準(zhǔn)1.2.12D變形（5）transform-origin屬性。transform-origin屬性可以更改一個(gè)元素的變形原點(diǎn)。在默認(rèn)情況下，變形原點(diǎn)都是元素的中心點(diǎn)，用戶(hù)可以通過(guò)transform-origin屬性重新定位變形原點(diǎn)。transform-origin屬性可以使用一個(gè)、兩個(gè)或三個(gè)值來(lái)指定，其中每個(gè)值都表示一個(gè)偏移量。沒(méi)有明確定義的偏移將重置為其對(duì)應(yīng)的初始值。該屬性的使用方法如下：1.2.12D變形transform-origin:x-offsety-offsetz-offsettransform-origin屬性的參數(shù)及描述參數(shù)描述x-offset定義變形原點(diǎn)距離盒模型左側(cè)的偏移值。該屬性值可以是百分比、px等具體值，也可以是top、right、bottom、left、center關(guān)鍵字y-offset定義變形原點(diǎn)距離盒模型的頂?shù)钠浦怠Ｔ搶傩灾悼梢允前俜直?、px等具體值，也可以是top、right、bottom、left、center關(guān)鍵字。z-offset定義變形原點(diǎn)距離用戶(hù)視線(xiàn)的偏移值。該屬性適用于3D變形，其值一般為px，不能是一個(gè)百分比。1.2.23D變形

除了2D變形，CSS3還支持3D變形。3D變形能帶來(lái)更為豐富的視覺(jué)效果。在了解3D變形之前，需要先對(duì)CSS的三維坐標(biāo)軸有一個(gè)認(rèn)識(shí)。右圖所示為CSS的三維坐標(biāo)軸，其中向右為X軸的正軸方向，向下為Y軸的正軸方向，面向屏幕的方向?yàn)閆軸的正軸方向。在認(rèn)識(shí)CSS3的三維坐標(biāo)軸之后，接下來(lái)逐一認(rèn)識(shí)3D變形中的各屬性應(yīng)用。CSS的三維坐標(biāo)軸（1）perspective屬性。perspective屬性指定了觀(guān)察者與Z=0平面的距離，使具有三維變換特性的元素產(chǎn)生透視效果。perspective屬性的默認(rèn)值為none，常用于需要三維變換元素的父容器上。例如：1.2.23D變形<style>.box{width:200px;height:200px;margin:auto;

/*設(shè)置視距為800px*/perspective:800px;}.box>img{transform:translateZ(0px);}</style><divclass="box"><imgsrc="animal.jpg"alt="企鵝"></div>perspective屬性效果打開(kāi)瀏覽器調(diào)試窗口，通過(guò)鍵盤(pán)上下方向鍵調(diào)整圖片的translateZ數(shù)值，該數(shù)值越大，圖片越大（即觀(guān)察者與圖片的Z軸距離越近）。當(dāng)該數(shù)值超過(guò)800px時(shí)，圖片將消失（相當(dāng)于圖片已經(jīng)穿過(guò)觀(guān)察者，處于觀(guān)察者后方）1.2.23D變形transform:rotateX(xdeg);其中，x可以為正數(shù)或負(fù)數(shù)。正數(shù)表示面朝X軸的正軸方向順時(shí)針旋轉(zhuǎn)的度數(shù)；負(fù)數(shù)則表示面朝X軸的正軸方向逆時(shí)針旋轉(zhuǎn)的度數(shù)。例如：<style>.box{text-align:center;perspective:300px;}.box>img{transition:transform1s;}.box>img:hover{transform:rotateX(180deg);}</style><divclass="box"><imgsrc="animal.jpg"alt="企鵝"></div>（2）三維旋轉(zhuǎn)。①rotateX()方法。rotateX()方法可以讓元素沿著X軸進(jìn)行旋轉(zhuǎn)，其語(yǔ)法格式如下：圖片沿著X軸的正軸方向順時(shí)針旋轉(zhuǎn)180°后的效果在本案例中，讀者可以嘗試將perspective屬性值設(shè)置為none和其他不同的值，并觀(guān)察元素的三維變換效果。Chrome瀏覽器②

rotateY()方法。rotateY()方法可以讓元素沿著Y軸進(jìn)行旋轉(zhuǎn)，其語(yǔ)法格式如下：transform:rotateY(xdeg);其中，x可以為正數(shù)或負(fù)數(shù)。正數(shù)表示面朝Y軸的正軸方向順時(shí)針旋轉(zhuǎn)的度數(shù)；負(fù)數(shù)則表示面朝Y軸的正軸方向逆時(shí)針旋轉(zhuǎn)的度數(shù)。例如，使用rotateY()方法設(shè)計(jì)一個(gè)開(kāi)窗動(dòng)畫(huà)：<style>.windows{width:488px;height:394px;margin:auto;perspective:500px;}.left_windows,.right_windows{float:left;transition:transform0.5s;}.left_windows{transform-origin:left;}.right_windows{transform-origin:right;}.windows:hover>.left_windows{transform:rotateY(40deg);}.windows:hover>.right_windows{transform:rotateY(-40deg);}</style>

<divclass="windows"><imgclass="left_windows"src="windows_l.png"alt="左窗"><imgclass="right_windows"src="windows_r.png"alt="右窗"></div>使用rotateY()方法設(shè)計(jì)的開(kāi)窗動(dòng)畫(huà)效果1.2.23D變形其它瀏覽器1.2.23D變形③rotateZ()方法。rotateZ()方法可以讓元素沿著Z軸進(jìn)行旋轉(zhuǎn)，其語(yǔ)法格式如下：

transform:rotateZ(xdeg);其中，x可以為正數(shù)或負(fù)數(shù)。正數(shù)表示面朝Z軸的正軸方向順時(shí)針旋轉(zhuǎn)的度數(shù)；負(fù)數(shù)則表示面朝Z軸的正軸方向逆時(shí)針旋轉(zhuǎn)的度數(shù)。rotateZ()方法在視覺(jué)效果上與2D變形的rotate()方法沒(méi)有區(qū)別，但并不等同于rotateZ()方法可以讓元素在2D平面上旋轉(zhuǎn)。④

rotate3D()方法。rotate3D()方法用于設(shè)置多個(gè)軸的3D旋轉(zhuǎn)，其語(yǔ)法格式如下：transform:rotate3d(x,y,z,angle);其中，x、y、z的取值范圍為0～1，0表示不旋轉(zhuǎn)，1表示旋轉(zhuǎn)；angle表示元素將要旋轉(zhuǎn)的角度。1.2.23D變形（3）三維平移。元素的三維平移可以使用translateX()方法、translateY()方法和translateZ()方法。其中，translateZ()方法取正值時(shí)，值越大表示元素距離觀(guān)察者越近；取負(fù)值時(shí)，值越小表示元素距離觀(guān)察者越遠(yuǎn)。如果需要同時(shí)設(shè)置多個(gè)平移屬性，則可以使用translate3d()方法，其語(yǔ)法格式如下：transform:translate3d(x,y,z);其中，x、y、z代表X軸、Y軸和Z軸的平移數(shù)值。（4）三維縮放。元素的三維縮放可以使用scaleX()方法、scaleY()方法和scaleZ()方法。如果需要同時(shí)設(shè)置多個(gè)平移屬性，則可以使用scale3d()方法，其語(yǔ)法格式如下：transform:scale3d(x,y,z);其中，x、y、z代表X軸、Y軸和Z軸的縮放數(shù)值（5）transform-style屬性。transform-style屬性用于設(shè)置元素的子元素位于3D空間中還是平面中，其取值如下表所示。值描述flat設(shè)置元素的子元素位于該元素的平面中preserve-3d設(shè)置元素的子元素位于3D空間中任務(wù)1廣告圖切換效果設(shè)計(jì)學(xué)習(xí)和掌握transition屬性、transform屬性之后，讀者可以通過(guò)這些屬性進(jìn)行廣告圖切換效果的設(shè)計(jì)。廣告圖切換效果主要是通過(guò)單擊<label>標(biāo)簽，對(duì)swipre_pagination廣告圖列表容器的margin-left屬性值進(jìn)行切換，再配合transition過(guò)渡屬性，從而實(shí)現(xiàn)廣告圖列表的切換效果，如下圖所示：廣告圖列表切換效果1.3任務(wù)實(shí)施（1）設(shè)計(jì)單擊焦點(diǎn)列表之后的圖片切換效果（2）設(shè)計(jì)選中焦點(diǎn)列表項(xiàng)時(shí)的激活樣式.swiper_wrapper{transition:margin-left0.4s;}#b1:checked~.swiper_wrapper{margin-left:0%;}#b2:checked~.swiper_wrapper{margin-left:-100%;}#b3:checked~.swiper_wrapper{margin-left:-200%;}#b1:checked~.swiper_paginationlabel:first-child{opacity:1;}#b2:checked~.swiper_paginationlabel:nth-child(2){opacity:1;}#b3:checked~.swiper_paginationlabel:last-child{opacity:1;}廣告圖切換效果1.3任務(wù)實(shí)施任務(wù)1廣告圖切換效果設(shè)計(jì)1.4任務(wù)拓展廣告欄和產(chǎn)品展示欄效果根據(jù)圖下圖完成廣告欄和產(chǎn)品展示欄的布局和交互效果設(shè)計(jì)廣告圖動(dòng)圖效果設(shè)計(jì)任務(wù)2任務(wù)概述本任務(wù)主要講解animation屬性的使用方法，幫助讀者掌握CSS關(guān)鍵幀動(dòng)畫(huà)設(shè)計(jì)，并進(jìn)行廣告圖動(dòng)畫(huà)效果設(shè)計(jì)。任務(wù)2廣告圖動(dòng)圖效果設(shè)計(jì)2.1動(dòng)圖CSS3的動(dòng)畫(huà)屬性允許開(kāi)發(fā)者創(chuàng)建關(guān)鍵幀動(dòng)畫(huà)，它可以取代許多網(wǎng)頁(yè)動(dòng)畫(huà)圖像、Flash動(dòng)畫(huà)和JavaScript實(shí)現(xiàn)的效果。CSS3動(dòng)畫(huà)主要由animation屬性和@keyframes規(guī)則兩部分組成，其中，animation屬性主要包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode和animation-play-state。2.1.1@keyframes規(guī)則@keyframes規(guī)則通過(guò)在動(dòng)畫(huà)序列中定義關(guān)鍵幀樣式來(lái)控制動(dòng)畫(huà)序列的中間步驟。和transition屬性相比，@keyframes規(guī)則可以更靈活地控制動(dòng)畫(huà)序列的中間步驟。例如：@keyframesmyAnimation{0%{margin-top:0px;}25%{margin-top:200px}50%{margin-top:100px;}75%{margin-top:200px}100%{margin-top:0px;}}代碼定義了一段名稱(chēng)為“myAnimation”的動(dòng)畫(huà)規(guī)則，該規(guī)則包含多個(gè)關(guān)鍵幀，也就是一段樣式塊語(yǔ)句。每個(gè)關(guān)鍵幀使用一個(gè)百分比值作為名稱(chēng)，代表動(dòng)畫(huà)播放過(guò)程中在哪個(gè)階段觸發(fā)這個(gè)幀所包含的樣式。其中，0%可以使用關(guān)鍵字from代替，100%可以使用關(guān)鍵字to代替。animation-name屬性值為@keyframes規(guī)則規(guī)定的名稱(chēng)。animation-name屬性可以指定一個(gè)或者多個(gè)動(dòng)畫(huà)名稱(chēng)，每個(gè)動(dòng)畫(huà)名稱(chēng)之間使用逗號(hào)隔開(kāi)。使用該屬性時(shí)必須設(shè)置animation-duration屬性值，否則默認(rèn)動(dòng)畫(huà)時(shí)長(zhǎng)為0，就不會(huì)播放動(dòng)畫(huà)。例如：

2.1.2transition-timing-function屬性

<style>.box{width:100px;height:100px;background:cornflowerblue;animation-name:myAnimation;animation-duration:2s;}

@keyframesmyAnimation{0%{margin-left:0px;}100%{margin-left:100px;}}</style><divclass="box"></div>代碼定義了一段從左向右運(yùn)動(dòng)的動(dòng)畫(huà)，動(dòng)畫(huà)時(shí)長(zhǎng)為2秒2.1.3animation-duration屬性animation-duration屬性用于定義動(dòng)畫(huà)完成一個(gè)周期所需要的時(shí)間，以秒或毫秒計(jì)。使用方法如下：animation-duration:6s;animation-duration:120ms;animation-timing-function屬性用于定義動(dòng)畫(huà)的速度曲線(xiàn)，其取值如表8-5所示。速度曲線(xiàn)用于定義動(dòng)畫(huà)從一套樣式變?yōu)榱硪惶讟邮剿玫臅r(shí)間。速度曲線(xiàn)的應(yīng)用可使動(dòng)畫(huà)的變化更為平滑。值描述linear動(dòng)畫(huà)從頭到尾的速度是相同的，即勻速運(yùn)動(dòng)ease默認(rèn)值。動(dòng)畫(huà)以低速開(kāi)始，之后速度變快，在結(jié)束前速度變慢ease-in動(dòng)畫(huà)以低速開(kāi)始ease-out動(dòng)畫(huà)以低速結(jié)束ease-in-out動(dòng)畫(huà)以低速開(kāi)始和結(jié)束cubic-bezier(n,n,n,n)在

cubic-bezier()

函數(shù)中定義自己的值。可能的值為

0

和

1

之間的數(shù)animation-iteration-count屬性用于定義動(dòng)畫(huà)的播放次數(shù)，其取值如表8-6所示，默認(rèn)值為1。2.1.5animation-iteration-count屬性值描述number動(dòng)畫(huà)播放次數(shù)的數(shù)值infinite動(dòng)畫(huà)無(wú)限次播放animation-direction屬性用于定義是否輪流反向播放動(dòng)畫(huà)，其取值為normal和alternate。normal為默認(rèn)值，表示動(dòng)畫(huà)正常播放。若將該屬性設(shè)置為alternate，則會(huì)使動(dòng)畫(huà)在奇數(shù)次正常播放，在偶數(shù)次逆向播放。例如：<style>.box{width:100px;height:100px;border-radius:20px;background:cornflowerblue;animation-name:myAnimation;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;}@keyframesmyAnimation{0%{margin-left:0px;}100%{margin-left:100px;}}</style><divclass="box"></div>代碼中，box容器的左側(cè)外間距將會(huì)在奇數(shù)次播放時(shí)從0變?yōu)?00像素，在偶數(shù)次播放時(shí)從100像素變?yōu)?，并循環(huán)播放該動(dòng)畫(huà)。

transition屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置以下4個(gè)過(guò)渡屬性：transition-property、transition-duration、transition-timing-function、transition-delay，且書(shū)寫(xiě)順序不能有誤。transition屬性可以設(shè)置多組過(guò)渡屬性，每組過(guò)渡屬性之間使用逗號(hào)分隔。例如：2.1.6animation-direction屬性<style>.box{width:100px;height:100px;background:coral;}.box:hover{width:200px;height:200px;transition:width2slinear,height3sease-in-out1s;}</style><divclass="box"></div>HTTP與HTTPS2.1.7animation-fill-mode屬性animation-fill-mode屬性用于定義當(dāng)動(dòng)畫(huà)不播放時(shí)（即動(dòng)畫(huà)完成時(shí)，或者當(dāng)動(dòng)畫(huà)因?yàn)橛醒舆t而未開(kāi)始播放時(shí)），要應(yīng)用于元素的樣式。在默認(rèn)情況下，CSS動(dòng)畫(huà)在第一個(gè)關(guān)鍵幀播放完成前不會(huì)影響元素，在最后一個(gè)關(guān)鍵幀播放完成后停止影響元素。animation-fill-mode屬性可以重寫(xiě)該行為。例如：<style>.box{background:#efefef;padding:30px;cursor:pointer;}.redball,.blueball{width:54px;height:54px;border-radius:50%;margin:10px;text-align:center;line-height:54px;}.redball{background:red;}.blueball{background:skyblue;}@keyframesmove{from{margin-left:0}to{margin-left:200px}}.box:hover.redball,.box:hover.blueball{animation-name:move;animation-duration:1500ms;animation-timing-function:linear;}.box:hover.blueball{animation-fill-mode:forwards;}</style>

<divclass="box"><divclass="redball">(●'?'●)</div><divclass="blueball">(●'?'●)</div></div>動(dòng)畫(huà)效果將鼠標(biāo)指針移入box容器后，動(dòng)畫(huà)開(kāi)始播放。當(dāng)動(dòng)畫(huà)播放完成后，藍(lán)色小球仍保持最后一個(gè)關(guān)鍵幀的樣式HTML2.1.8animation-play-state屬性animation-play-state屬性用于定義動(dòng)畫(huà)是否運(yùn)行或者暫停，其取值如表8-8所示。使用該屬性可以查詢(xún)動(dòng)畫(huà)是否正在運(yùn)行，還可以定義動(dòng)畫(huà)的暫停和動(dòng)畫(huà)的重放。<style>.disc{width:180px;height:180px;margin:auto;background:url(disc.png);background-size:cover;}@keyframesroll{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.disc{animation-name:roll;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:running;}.disc:hover{animation-play-state:paused;}</style>

<divclass="disc"></div>當(dāng)鼠標(biāo)指針移入唱碟時(shí)，animation-play-state屬性值為paused，動(dòng)畫(huà)會(huì)停止播放；當(dāng)鼠標(biāo)指針離開(kāi)唱碟時(shí)，animation-play-state屬性值為running，動(dòng)畫(huà)恢復(fù)播放，效果如圖所示：animation屬性是一個(gè)簡(jiǎn)寫(xiě)