任務(wù)12首

其他板塊的設(shè)計與制作本任務(wù)需要完成“學(xué)習(xí)黨的二十大精神專題網(wǎng)”首頁的其他板塊，包括學(xué)習(xí)資料、學(xué)習(xí)光影、學(xué)習(xí)研討、學(xué)習(xí)動態(tài)、頁腳幾個板塊。其中學(xué)習(xí)資料板塊使用的是

浮動布局，學(xué)習(xí)光影、學(xué)習(xí)研討、學(xué)習(xí)動態(tài)板塊使用彈性布局，頁腳使用最基本標(biāo)

準(zhǔn)流布局。這些都是網(wǎng)站開發(fā)的基本技能。學(xué)習(xí)光影板塊使用了變形、過渡、動畫這三種特效使頁面更加炫酷，鼠標(biāo)移到圖片上，圖片會緩慢變大，鼠標(biāo)離開圖片時，圖片會縮回原來的大小。通過本任務(wù)的學(xué)習(xí)，將利用前面所學(xué)到的各種網(wǎng)頁制作技術(shù)，完成整個首頁的制作。網(wǎng)頁效果如所示：任務(wù)12首頁其他板塊的設(shè)計與制作任務(wù)·習(xí)興規(guī)宜的二十六須悼，總記遠(yuǎn)樣面端·學(xué)習(xí)8的二+九酒研E

開斷式上方監(jiān)類

兩正確通大力中BrCE·

積加行8傳

邪二十人

理

就

會

0

8Dk

立反·進(jìn)平R

分人士讀件

以光發(fā)為照理腳ae在建力大地上發(fā)用志人作排·習(xí)動平在機(jī)R

力

模

中

心描

m

二十人播鄉(xiāng)值855·

中在菜五

a

口*度業(yè)用磨之上發(fā)本·中葉關(guān)于認(rèn)典*改光地光的二十大褶的決定·

萬中

/

童

友

效

次

通

心

體

購

進(jìn)

友

膜

感學(xué)習(xí)光影盛會說221115·信想工寬總變開世究的二十大

n

世人此中人影2211·信單工程F8EB

第十共禮本大曲、第十二共生代家大2023-1-15·

臨想工學(xué)玩此總支點開2022年生32011

·

儒TN

稅此總發(fā)并世“里地2035·

工程8開世防程加課地地

2021-3.13·臨燃工E

非稅此總變細(xì)摩寫臺的十九E

中出績地

2022日42·臨工EP8地

E

工

開

世

繼任務(wù)12首頁其他板塊的設(shè)計與制作·在

二.在共典雪中溫與B·美于平習(xí)75折二十大痛神工作哪·單功如的二十大捕神A學(xué)

法加

+n.件力流續(xù)動力

—

并地nt票學(xué)習(xí)所您性·世進(jìn)人與西(以出位角的二十人地神)任務(wù)首頁其他板塊效果202102e7202]01-42022-2152022-112022-11-172022-112022-11-02022-110520233152023-3-152023-12023-3-15學(xué)習(xí)學(xué)習(xí)動態(tài)學(xué)習(xí)研討(1)掌握

flex彈性布局的各種屬性及使用方法。

知識目標(biāo)

(2)熟悉網(wǎng)格模型。(

3

)

掌

握

CSS

變形、過渡、動畫的用法。(1)能夠使用flex

技術(shù)布局頁面。技能目標(biāo)

(2)能夠根據(jù)網(wǎng)頁的實際需要靈活運用各種布局技術(shù)。(3)能利用CSS

實現(xiàn)頁面中的常用動態(tài)效果。(1)掌握并遵循Web

開發(fā)標(biāo)準(zhǔn)，培養(yǎng)嚴(yán)謹(jǐn)?shù)墓ぷ髯黠L(fēng)。

素質(zhì)目標(biāo)

(2)培養(yǎng)良好的自主學(xué)習(xí)和思考習(xí)慣。(3)加強(qiáng)實踐教育，提升實踐能力。任務(wù)12首頁其他板塊的設(shè)計與制作1.

彈性布局2.

利用CSS

實現(xiàn)動態(tài)效果3.

任務(wù)實現(xiàn)任務(wù)12首頁其他板塊的設(shè)計與制作1.彈性布局1.1彈性布局的基本概念1.2彈性布局的使用1.3彈性布局的屬性任務(wù)12首頁其他板塊的設(shè)計與制作+float

屬性。它對于那些特殊布局不方便，比如垂直居中就不容易實現(xiàn)。彈性布局，又稱為

flex

布局，是CSS

的一種新的布局模式，是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季?/p>

方

式

。1.彈性布局1.1彈性布局的基本概念網(wǎng)頁常見的布局方案是基于盒模型，依賴

display屬性+position

屬性1.彈性布局1.1彈性布局的基本概念引入彈性盒模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間。彈性布局有以下兩個重要的概念：1.容器和項目容器：需要添加彈性布局的父元素。項目：彈性布局容器中的每個子元素，稱為項目。2.主軸和交叉軸主軸：在彈性布局中，通過屬性規(guī)定水平或垂直方向為主軸。交叉軸：與主軸垂直的另外一方向，稱之為交叉軸。1.彈性布局1.2彈性布局的使用彈性布局使用比較簡單，但是依然有一些注意事項。在使用時需要注意以下兩點：(1)給容器添加display:flex/inline-flex

屬性，就可使容器內(nèi)中的

項目采用彈性布局顯示，不遵循常規(guī)標(biāo)準(zhǔn)文檔流的顯示方式。而容器本身在文檔流中的定位方式依然遵循常規(guī)標(biāo)準(zhǔn)文檔流的顯示方式。(2)將容器設(shè)為彈性布局后，項目的float、clear和vertical-align

屬性將失效，但

position

屬性依然生效。1.彈性布局1.3彈性布局的屬性彈性布局有12大屬性，按照作用范圍的不同，可以分為容器屬性和項

目屬性兩類。1.容器屬性(1)flex-direction

屬性flex-direction

屬性定義容器要在哪個方向上堆疊項目，它用來定義主軸，

可以取4個值，具體含義如表所示：屬性值描述row默認(rèn)值。設(shè)置橫向從左到右排列(左對齊)。水平方向為主軸，垂直方向為交叉軸

彈性項目從左到右水平方向順序排列。主軸的起始線是彈性容器的左邊，終止線是彈性容器的右邊。row-reverse反轉(zhuǎn)橫向排列(右對齊),從后往前排列，最后一項排在最前面。水平方向為主軸垂直方向為交叉軸，彈性項目從右到左水平方向逆序排列。主軸的起始線是彈性容器的右邊，終止線是彈性容器的左邊。column縱向排列。垂直方向為主軸，水平方向為交叉軸，彈性項目從上到下垂直方向順序排列。主軸的起始線是彈性容器的上邊，終止線是彈性容器的下邊。column-reverse反轉(zhuǎn)縱向排列，從后往前排，最后一項排在最上面。垂直方向為主軸，水平方向為

交叉軸，彈性項目從下到上垂直方向逆序排列。主軸的起始線是彈性容器的下邊，

終止線是彈性容器的上邊。1.彈性布局1.3彈性布局的屬性flex-direction

屬性定義主軸1.彈性布局1.3彈性布局的屬性(2)flex-wrap

屬性flex-wrap

屬性用于指定彈性容器的項目換行方式。常用屬性值及含義如表所示：表

flex-wrap

屬性值及其含義屬性值描述nowrap

默認(rèn)值，彈性容器為單行。該情況下彈性項目可能會溢出容器彈性容器為多行。該情況下彈性項目溢出的部分會被放置到新行，項

wrap

目、內(nèi)部會發(fā)生斷行。wrap-reverse反轉(zhuǎn)wrap排列。屬性值

描述flex-start彈性項目緊靠主軸起點。flex-end

彈性項目緊靠主軸終點center

彈性項目向主軸中點對齊space-between第一個彈性項目靠起點，最后一個彈性項目靠終點，余下彈性項目平均分配間隔空間，彈性項目會平均地分布在主軸里space-around每個彈性項目兩側(cè)的間隔相等。所以，彈性項目之間的間隔比彈性項目與彈性盒子的

邊距的間隔大一倍space-evenly

元素間距離平均分配1.彈性布局1.3彈性布局的屬性(3)flex-flow

屬性flex-flow

是復(fù)合屬性，是

flex-direction和

flex-wrap的縮寫形式。(4)justify

-content

屬性justify-content

屬性定義了彈性項目在主軸方向的對齊方式，屬性值及含義

如表所示：justify-content屬性值及含義屬性值描述flex-start彈性項目緊靠交叉軸的起點對齊，即彈性項目的側(cè)軸(縱軸)起始位置的邊界

緊靠該行的側(cè)軸起始邊界。flex-end彈性項目緊靠交叉軸的終點對齊，即彈性項目的側(cè)軸(縱軸)起始位置的邊界緊靠該行的側(cè)軸結(jié)束邊界。center彈性項目向交叉軸的中點對齊，即彈性項目在該行的側(cè)軸(縱軸)上居中放置。(如

果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度)。stretch默認(rèn)值，如果彈性項目未設(shè)置高度或設(shè)為auto,彈性項目將被拉伸占滿整個容器的高度，但同時會遵照“min/max-width/height”屬性的限制。1.彈性布局1.3彈性布局的屬性(5)align-items

屬性align-items

屬性用于設(shè)置彈性項目在交叉軸方向上的排列，屬性值及含義如表所示：align-items

屬性值及其含義屬性值描述stretch默認(rèn)值，將項目拉伸以占據(jù)剩余空間。flex-start項目在容器的起點排列。flex-end項目在容器的終點排列。center項目在容器內(nèi)居中排布。space-between多行項目均勻分布在容器中，其中第一行分布在容器的起點，最后一行分布在容器的重點。space-around多行項目均勻分布在容器中，并且每行的間距(包括離容器邊緣的間距)都相等1.彈性布局1.3彈性布局的屬性(6)align-content

屬性align-content

屬性定義了多根主軸線的對齊方式。如果項目只有一根主軸線，

該屬性不起作用。屬性值及含義如表所示：align-content

屬性的屬性值1.彈性布局1.3彈性布局的屬性2.項目屬性(1)order屬性order

屬性用于控制彈性項目的排列順序，默認(rèn)為0,數(shù)值越小，排列越

靠前，可以負(fù)數(shù)或整數(shù)。(2)flew-grow

屬性flew-grow

屬性用來設(shè)置項目相對于其他項目的增長量。flew-grow

屬性默

認(rèn)

為

0

,

如

果存在剩余空間不夠，也不增長。(3)flew-shrink屬性flew-shrink

屬性與

flex-grow

屬性相反，用來設(shè)置項目相對于其他項

目的收縮量，默認(rèn)值為1。(4)flex-basis

屬性flex-basis

屬性屬性規(guī)定彈性項目占據(jù)的主軸空間。如果主軸為水平，

設(shè)置這個屬性相當(dāng)于設(shè)置項目的寬度，原width

屬性將會失效。1.彈性布局1.3彈性布局的屬性(5)flex

屬性flex

屬性是

flex-grow、flex-shrink

和

flex-basis

三個屬性的簡寫。默認(rèn)值為0,

1

,auto

。

后兩個屬性是可選。(6)align-self

屬性align-self

屬性用控制單個彈性項目在交叉軸上排列方式，而

align-items屬

性用于控制彈性容器中所有彈性項目的排列。如果設(shè)置了項目的

align-self

屬性，

將會覆蓋容器的align-items

屬性。2.利用CSS

實現(xiàn)動態(tài)效果2.1

transition過渡2.2

transform

變形2.3

animation

動畫任務(wù)12首頁其他板塊的設(shè)計與制作轉(zhuǎn)變到另一個樣式的過渡動畫效果。也就是通過transition

屬性，可以設(shè)置屬性值在一定的時間區(qū)間內(nèi)平滑地過渡另一個屬性值的過渡動畫。這種效果可以

在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效

果改變屬性值。要實現(xiàn)這種過渡動畫效果，必須規(guī)定以下兩項內(nèi)容：(1)指定要添加效果的

CSS

屬

性

；(2)指定效果的持續(xù)時間。2.利用

CSS

實現(xiàn)動態(tài)效果屬性(過渡屬性)給元素添加從一種樣式2.1

transition

過渡在CSS

中，可以使用

transition屬性值

描述transition-property規(guī)定應(yīng)用過渡的CSS屬性的名稱transition-timing-function定義過渡效果花費的時間，默認(rèn)是0transition-timing-function規(guī)定過渡效果的時間曲線，默認(rèn)是"ease"transition-delay規(guī)定過渡效果何時開始，默認(rèn)是0transition

簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性2.1

transition

過渡實現(xiàn)過渡效果的屬性及含義如下表所示：過渡屬性

transition2.利用CSS

實現(xiàn)動態(tài)效果其

中

，none表示沒有屬性會獲得過渡效果；all:默認(rèn)值，所有屬性都將獲得過

渡效果；property

表示定義應(yīng)用過渡效果的CSS

屬性名稱，多個屬性名之間以逗號

分隔，例如：transition-property:background-color,width;(2)transition-duration

屬性transition-duration

屬性用來定義過渡效果所花費的時間，默認(rèn)值為0,常用

單位是秒(s)或者毫秒(ms)

。語法格式如下：2.1

transition

過渡(1)transition-property

屬性transition-property

屬性用來定義哪些屬性需要進(jìn)行平滑過渡動畫。語法格式

如

下

：transition-property:none

|all

|property;transition-duration:數(shù)值s/ms;屬性值數(shù)值的數(shù)值為0時，沒有過渡動畫。屬性值描述linear指定以相同速度(勻速)開始至結(jié)束的過渡效果ease默認(rèn)值，指定以慢速開始，然后變快，最后慢慢結(jié)束的過渡效果ease-in指定以慢速開始，然后逐漸加快的過渡效果ease-out指定以慢速結(jié)束的過渡效果ease-in-out指定以慢速開始和結(jié)束的過渡效果cubic-bezier(n,n,n,n)定義用于加速或者減速的貝塞爾曲線的形狀，它們的值是0~1(3)transition-timing-function

屬性transition-timing-function

屬性規(guī)定過渡效果的速度曲線，可以根據(jù)時間的推

進(jìn)去改變屬性值的變換速率，有6個變換速率值，屬性值及含義如表所示。transition-timing-function

屬性值2.2.1

transition

過渡利用

CSS

實現(xiàn)動態(tài)

效果transition-delay

的屬性值可以為正整數(shù)、負(fù)整數(shù)和0。當(dāng)設(shè)置為負(fù)數(shù)時，過渡動作會從該時間點開始，之前的動作被截斷；設(shè)置為正數(shù)時，過渡動作會被延遲觸發(fā)。(5)transition屬性transition

屬

性

是

一

個

復(fù)

合

屬

性

，

用

于

在

一

個

屬

性

中

設(shè)

置

transition-

property

、transition-duration

、transition-timing-function

、transition-delayg

共4個過渡屬性。語法格式如下：2.1

transition

過渡(4)transition-delay

屬性transition-delay

屬性用來定義過渡動畫的延遲觸發(fā)的時間，默認(rèn)值為0,屬

性值數(shù)值的常用單位是秒(s)

或者毫秒(ms)。

語法格式如下：transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;transition-delay:數(shù)值s/ms;2.1

transition

過渡在使用

transition

屬性設(shè)置過渡效果時，它的各個參數(shù)必須按照順序進(jìn)行定義，

不能顛倒。無論是單個屬性還是簡寫屬性，使用時都可以實現(xiàn)多個過渡效果。例如：使用

transition

屬性在設(shè)置過渡動畫效果時，可以添加多個樣式的變換效果，

添加的屬性由逗號分隔。例如以下代碼： transition:width

2s,height

2s;設(shè)置了寬度和高度兩個屬性上的過渡動畫效果。等價于 transition:width2sease

Os;

也等價于下面的代碼段：transition-property:width;193transition-duration:2s;transition-timing-function:ease;transition-delay:Os;transition:width2s;2.2

transform

變形在

CSS中，可以利用transform

屬性來實現(xiàn)元素的旋轉(zhuǎn)、縮放、傾斜、移動等變形處理。變形處理由變形函數(shù)來完成，變形函數(shù)用來操控元素發(fā)生旋轉(zhuǎn)、

縮放、傾斜、移動等變化。transform

屬性的語法格式如下：屬性值描述none默認(rèn)值，表示不進(jìn)行變形transform-function用于設(shè)置變形函數(shù)，可以是一個或多個變形函數(shù)列表其屬性值的含義見表所示。transform

屬性值及其含義transform:none|transform-function;變形類型2D變形函數(shù)描述旋轉(zhuǎn)元素rotate(angel)參數(shù)angel是度數(shù)值，代表旋轉(zhuǎn)角度縮放元素scale(x,y)改變元素的高度和寬度。x,y的值代表縮放比例，

小數(shù)取值包括正數(shù)、負(fù)數(shù)和scaleX(x)改變元素的寬度scaleY(y)改變元素的高度傾斜元素移動元素skew(x-angel,y-angel)參數(shù)angel是度數(shù)值，代表傾斜角度skewX(angel)沿著x軸傾斜元素skewY(angel)translate沿著y軸傾斜元素(x,y)基于x和y坐標(biāo)重新定位元素translatex(x)translateY(y)沿著x軸移動元素，即左右方向沿著y軸移動元素，即上下方向2.利用CSS

實現(xiàn)動態(tài)效果軸進(jìn)行變形。常用2D變形函數(shù)2.2transform

變形1.2D變形2D變形是指某個元素圍繞其x軸和y如表所示。常用2D變形函數(shù)變形類型3D變形函數(shù)描述Rotate3d(x,y,z,angel)

前三個參數(shù)用于判斷需要旋轉(zhuǎn)的坐標(biāo)軸，旋轉(zhuǎn)軸的值設(shè)置為1,否則為0,參數(shù)angel代表旋轉(zhuǎn)角度3D旋轉(zhuǎn)RotateX(angel)

沿著x軸3D旋轉(zhuǎn)RotateY(angel)沿著y軸3D旋轉(zhuǎn)RotateZ(angel)

沿著z軸3D旋轉(zhuǎn)Scale3d(x,y,z)

參數(shù)x,y,z是縮放比例，取值包括正數(shù)、負(fù)數(shù)和小數(shù)3D縮放元素scaleX(x)沿著x軸縮放scaleY(y)沿著y軸縮放scaleZ(z)

沿著z軸縮放3D

變形是指某個元素圍繞其

x

軸、y

軸、z軸進(jìn)行變形。常用3D

變形函數(shù)見表所示。常

用

3D變形函數(shù)2.2transform

變形2.3D

變形2.利用CSS

實現(xiàn)動態(tài)效果變形類型

3D變形函數(shù)

描述skew(x-angel,y-angel)參數(shù)angel是度數(shù)值，代表傾斜角度傾斜元素skewX(angel)

沿著x軸傾斜元素skewY(angel)

沿著y軸傾斜元素移動元素Translate3d(x,y,z)

(x,y,z)基于x、y和z軸坐標(biāo)重新定位元素translatex(x)沿著x軸移動元素，即左右方向translateY(y)translateY(z)沿著y軸移動元素，即上下方向沿著z軸移動元素3D透視圖

Perspective(n)

參數(shù)n是透視深度的數(shù)值2.2

transform

變形

2.利用CSS

實現(xiàn)動態(tài)效果偏移量取值描述X軸偏移量指定以方向位置名詞有：left、center、right;

具體數(shù)值，如：20px百分比：如10%y軸偏移量方向位置名詞有：

top、center、bottom;具體數(shù)值，如：20px百分比：如10%z軸偏移量具體數(shù)值，如：20px2.2

transform

變形3.元素變形基準(zhǔn)點變形默認(rèn)都是以元素的中心點為基準(zhǔn)點進(jìn)行的，如果需要改變這個基準(zhǔn)點，

可以使用transform-origin

屬性，語法格式如下：xy

z分別是x

軸、y軸和z

軸的偏移量，偏移量的取值可以是具體數(shù)據(jù)、

百分比，也可以是方向位置名詞。偏移量的屬性值含義見表所示。transform-origin屬性值(偏移量)transform-origin:xy

z;2.3animation

動畫動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

CSS

中主要是運用

@keyframes

關(guān)鍵幀和animation

相關(guān)屬性來實現(xiàn)。@keyframes

用來定義動

畫，animation

將定義好的動畫綁定到特定元素，并定義動畫時長、重復(fù)次數(shù)等

相關(guān)屬性。1.@keyframes

定義動畫關(guān)鍵幀狀態(tài)@keyframes

屬性用來定義動畫關(guān)鍵幀的狀態(tài)，其語法格式如下：其中，animationname

定義動畫的名稱，其值是一個自定義標(biāo)識符，例如：

colorchange。

keyframes-selector

是關(guān)鍵幀選擇器，值是通常是一個百分比，

指定當(dāng)前關(guān)鍵幀在整個動畫過程中的位置，0%表示動畫的開始，100%表示動畫

的結(jié)束。還可以使用

from

或者

to

表示

，from

表示動畫的開始，相當(dāng)于0%,

to

表示動畫的結(jié)束相當(dāng)于100%。

CSS-styles

表示執(zhí)行到當(dāng)前關(guān)鍵幀時對應(yīng)的

動畫狀態(tài)，其值是一個樣式表。每個關(guān)鍵幀表示動畫過程中的一個狀態(tài)，動畫有

多個關(guān)鍵幀。@keyframes

animationname{keyframes-selector{CSS-styles;}}偏移量取值描述animation-name規(guī)定@keyframes動畫的名稱animation-duration規(guī)定動畫完成一個周期所花費的秒或毫秒，默認(rèn)是0animation-timing-function規(guī)定動畫的速度曲線，默認(rèn)是"ease"animation-fill-mode規(guī)定當(dāng)動畫不播放時(當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時),要應(yīng)用到元素的樣式animation-delay規(guī)定動畫何時開始，默認(rèn)是0animation-iteration-count規(guī)定動畫被播放的次數(shù)，默認(rèn)是1animation-direction

"normal"規(guī)定動畫是否在下一周期逆向播放，默認(rèn)是animation-play-state規(guī)定動畫是否正在運行或暫停，默認(rèn)是"running"animation所有動畫屬性的簡寫屬性2.動畫的調(diào)用當(dāng)

在

@keyframes中創(chuàng)建動畫時，需把它捆絆到某個選擇器，否則不會產(chǎn)生

動畫效果。CSS

通過

animation

屬性調(diào)用動畫，animation

相關(guān)的屬性如表所示。

animation屬性2.3animation

動畫2.利用CSS

實現(xiàn)動態(tài)效果其

中

，Keyframename

用于規(guī)定需要綁定到選擇器的@keyframes

定義的

動畫名稱，如果值為

none,則表示不應(yīng)用任何動畫，通常用于覆蓋或者取消動

畫

。(2)animation-duration

屬性anmnon-duraton

屬性用于定義整個動畫效果完成所需要的時間，語法格

式加下：2.3animation

動畫(1)animation-name

屬性animation-name

屬性用于定義要應(yīng)用的動畫名稱，為@keyframes

動畫規(guī)

定名稱。語法格式如下：數(shù)值是以秒(s)或者毫秒(ms)為單位的時長，默認(rèn)值為0,表示沒有任何動畫效果。

當(dāng)值為負(fù)數(shù)時，則被視為0。animation-name:keyframename|none;animation-duration:數(shù)值；屬性值速度曲線描述linear動畫從頭到尾的速度是相同的ease默認(rèn)值，動畫以速度開始，然后加快，在結(jié)束前變慢ease-in動畫以低速度開始ease-out動畫以低速度結(jié)束ease-in-out動畫以低速度開始和結(jié)束2.3animation

動畫(3)animation-timing-function

屬性animation-timing-function

用來規(guī)定動畫的速度曲線，定義使用哪種方式

來執(zhí)行動畫效果。語法格式如下：屬性值及含義如表所示。animation-timing-function

屬性值及其含義animation-timing-function:

屬性值；2.3animation

動畫(4)animation-fill-mode屬性animation-fill-mode

屬性用來設(shè)置動畫播放時間之外的效果，即動畫開始

或動畫結(jié)束時的狀態(tài)。語法格式如下：屬性值描述none默認(rèn)開始保持原來的樣式，結(jié)束保持原來的樣式backwards開始前處于第一幀的樣式，結(jié)束默認(rèn)保持原來的樣式forwards開始前默認(rèn)保持原來的樣式，結(jié)束保持最后一幀的樣式both開始保持第一幀，結(jié)束保持最后一幀的樣式屬性值及含義如表所示。animation-fill-mode

屬性值及其含義animation-fill-mode:none|backwards

|forwards

|both;2.3animation

動畫(4)animation-fill-mode屬性animation-fill-mode

屬性用來設(shè)置動畫播放時間之外的效果，即動畫開始

或動畫結(jié)束時的狀態(tài)。語法格式如下：屬性值描述none默認(rèn)開始保持原來的樣式，結(jié)束保持原來的樣式backwards開始前處于第一幀的樣式，結(jié)束默認(rèn)保持原來的樣式forwards開始前默認(rèn)保持原來的樣式，結(jié)束保持最后一幀的樣式both開始保持第一幀，結(jié)束保持最后一幀的樣式屬性值及含義如表所示。animation-fill-mode

屬性值及其含義animation-fill-mode:none|backwards

|forwards

|both;取值說明：數(shù)值是動畫開始前等待的時長，其單位是秒(s)

或者毫秒(ms),

默認(rèn)屬性值為0。(6)animation-iteration-count

屬性animation-iteration-count

屬性用于定義動畫的播放次數(shù)。其基本語法格

式如下

：2.3animation

動畫(5)animation-delay屬性animation-delay

屬性用于定義動畫什么時候開始。其基本語法格式如下：取值說明：數(shù)值是播放動畫的次數(shù)，初始值為1;如果值是infinite,則動

畫循環(huán)播放。animation-iteration-count:數(shù)值|infinite;animation-delay:數(shù)值；取值說明：normal:默認(rèn)值，表示動畫每次都會正常顯示。alternate:動畫

播放完成后會逆向交替循環(huán)，即動畫會在奇數(shù)次數(shù)正常播放，而在偶數(shù)次數(shù)逆向播

放。(8)animation-play-state

屬性animation-play-state屬性規(guī)定動畫是否正在運行或暫停，其語法格式如

下

：2.3animation

動畫(7)animation-direction

屬性animation-direction屬性定義動畫播放完成后是否逆向交替循環(huán)。其基本

語法格式如下：屬性值paused設(shè)置動畫已暫停。running

是默認(rèn)值，規(guī)定動畫正在播放。animation-play-state:running|paused;animation-direction:normal|alternate;2.利用CSS

實現(xiàn)動態(tài)2.3animation

動畫(9)animation

屬性animation

屬性是一個復(fù)合屬性。語法格式如下：其中，使用animation

屬性時必須指定animation-name

和animation-duration屬性，如果持續(xù)的時間為0,則不會播放動畫。其他屬性如果沒有設(shè)置，

可以省略。除了animation-play-state