網(wǎng)頁制作案例教程HTML5 CSS3 試題及答案 項(xiàng)目10 CSS3過渡 變形和動畫效果

一、單選題1、transition-duration屬性能夠設(shè)置什么內(nèi)容？A、完成過渡所使用的方法B、具體的線路函數(shù)C、完成過渡所使用的時(shí)間D、完成過渡的延遲時(shí)間答案：C

2、過渡屬性（transition-property）中想要指定所有元素支持transition-property屬性的樣式，應(yīng)該使用什么屬性值？A、nameB、allC、IDENTD、width答案：B

3、ease-in-out這個(gè)屬性值的意思是?A、動畫從頭到尾的速度是相同的。B、動畫以低速開始和結(jié)束。C、動畫以低速開始。D、默認(rèn)。動畫以低速開始，然后加快，在結(jié)束前變慢。答案：B

4、動畫設(shè)置輪流反向播放應(yīng)該使用如下那個(gè)屬性？A、animation-fill-modeB、animation-timing-functionC、animation-directionD、animation-play-state答案：C5、在CSS中，哪個(gè)屬性用于定義過渡效果？A.transitionB.animationC.transformD.move答案：A6、過渡效果可以應(yīng)用于哪些CSS屬性？A.僅顏色B.僅寬度和高度C.大部分CSS屬性D.無法確定答案：C7、CSS的transition-duration屬性用于設(shè)置什么？A.過渡效果的名稱B.過渡效果開始前的延遲時(shí)間C.過渡效果的持續(xù)時(shí)間D.過渡效果的速度曲線答案：C8、CSS的transform屬性主要用于什么？A.改變元素的位置B.對元素進(jìn)行2D或3D轉(zhuǎn)換C.創(chuàng)建動畫效果D.改變元素的背景色答案：B9、如何使用CSS將一個(gè)元素沿X軸旋轉(zhuǎn)45度？A.transform:rotate(45deg);B.transform:rotateX(45deg);C.transform:rotateY(45deg);D.transform:rotateZ(45deg);答案：A（注意：雖然存在rotateX和rotateY，但rotate默認(rèn)是繞Z軸旋轉(zhuǎn)）10、如何使用CSS將元素沿X軸平移100px？A.transform:translateX(100px);B.transform:translate(100px);C.transform:moveX(100px);D.transform:shiftX(100px);答案：A11、CSS的@keyframes規(guī)則用于什么？A.定義過渡效果B.定義變形效果C.定義動畫效果D.定義元素的尺寸答案：C12、如何設(shè)置動畫的持續(xù)時(shí)間？A.animation-durationB.animation-timeC.animation-speedD.animation-length答案：A13、如何設(shè)置動畫開始前的延遲時(shí)間？A.animation-delayB.animation-waitC.animation-time-offsetD.animation-lag答案：A14、如何設(shè)置動畫的迭代次數(shù)？A.animation-iterationB.animation-repeatC.animation-countD.animation-loop答案：C15、如何設(shè)置動畫的播放狀態(tài)？A.animation-playB.animation-stateC.animation-play-stateD.animation-run答案：C16、如何將多個(gè)動畫效果應(yīng)用到一個(gè)元素上？A.使用逗號分隔的動畫名稱B.使用空格分隔的動畫名稱C.使用分號分隔的動畫名稱D.使用animation屬性的多個(gè)值答案：A17、CSS的transform-origin屬性用于設(shè)置什么？A.變形效果的起點(diǎn)B.變形效果的終點(diǎn)C.元素的位置D.元素的背景色答案：A18、如何使用CSS將一個(gè)元素沿Y軸縮放1.5倍？A.transform:scaleY(1.5);B.transform:scale(1.5);C.transform:resizeY(1.5);D.transform:zoomY(1.5);答案：A19、CSS的animation-fill-mode屬性用于設(shè)置什么？A.動畫的播放速度B.動畫的迭代次數(shù)C.動畫在播放前后的狀態(tài)D.動畫的播放方向答案：C20、如何創(chuàng)建一個(gè)無限循環(huán)的動畫？A.animation-iteration-count:infinite;B.animation-repeat:infinite;C.animation-loop:true;D.animation-count:-1;答案：A21、如何設(shè)置動畫的播放方向?yàn)榉聪?？A.animation-direction:reverse;B.animation-play-direction:backward;C.animation-flow:reverse;D.animation-order:backward;答案：A二、多選題1、CSS的transition屬性可以包含哪些子屬性？A.transition-propertyB.transition-durationC.transition-timing-functionD.transition-delay答案：ABCD2、哪些CSS屬性通常支持過渡效果？A.widthB.heightC.background-colorD.border-radius答案：ABCD3、下列哪些方法可以用于創(chuàng)建CSS動畫？A.使用@keyframes規(guī)則B.使用transition屬性C.使用animation屬性D.使用<animate>標(biāo)簽答案：AC4、CSS的transform屬性支持哪些變形操作？A.旋轉(zhuǎn)（Rotate）B.縮放（Scale）C.傾斜（Skew）D.透明度（Opacity）答案：AB,C5、關(guān)于CSS動畫，以下哪些說法是正確的？A.動畫可以循環(huán)播放B.動畫可以暫停和恢復(fù)C.動畫只能應(yīng)用于一個(gè)CSS屬性D.動畫可以設(shè)置不同的速度曲線答案：ABD6、下列哪些CSS屬性可以用于設(shè)置transform-origin的值？A.像素值（如50px）B.百分比值（如50%）C.關(guān)鍵字（如top、right、bottom、left、center）D.顏色值（如red）答案：ABC7、CSS的animation-direction屬性可以設(shè)置為哪些值？A.normalB.reverseC.alternateD.alternate-reverse答案：ABCD8、關(guān)于CSS過渡和動畫，以下哪些說法是正確的？A.過渡和動畫都可以產(chǎn)生平滑的視覺效果B.過渡和動畫都需要使用@keyframes規(guī)則C.過渡是動畫的一種簡化形式D.過渡和動畫都可以通過JavaScript進(jìn)行控制答案：ACD9、CSS的transition-timing-function屬性可以設(shè)置為哪些值？A.linearB.easeC.ease-inD.cubic-bezi