當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

作业题之动画改良

發(fā)布時(shí)間：2025/6/17 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了作业题之动画改良小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

CSS3 有3種和動(dòng)畫(huà)相關(guān)的屬性：transform, transition, animation。

其中 transform 描述了元素靜態(tài)樣式。而transition 和 animation 卻都能實(shí)現(xiàn)動(dòng)畫(huà)效果。

所以它們常常配合使用，可以做到一些很炫的效果。

不同點(diǎn)：

1. ?觸發(fā)條件不同。transition通常和hover等事件配合使用，由事件觸發(fā)。animation則和gif動(dòng)態(tài)圖差不多，立即播放。

2. 循環(huán)。 animation可以設(shè)定循環(huán)次數(shù)。

3. 精確性。 animation可以設(shè)定每一幀的樣式和時(shí)間。tranistion 只能設(shè)定頭尾。 animation中可以設(shè)置每一幀需要單獨(dú)變化的樣式屬性，

transition中所有樣式屬性都要一起變化。

4. 與javascript的交互。animation與js的交互不是很緊密。tranistion和js的結(jié)合更強(qiáng)大。js設(shè)定要變化的樣式，

transition負(fù)責(zé)動(dòng)畫(huà)效果，天作之合，比之前只能用js時(shí)爽太多。

結(jié)論：

1. 如果要靈活定制多個(gè)幀以及循環(huán)，用animation.

2. 如果要簡(jiǎn)單的from to 效果，用 transition.

3. 如果要使用js靈活設(shè)定動(dòng)畫(huà)屬性，用transition.

以上是摘抄別人的博文的。

transition和animation是不能一起共同一起使用的。

這次作業(yè)有個(gè)要做動(dòng)畫(huà)的效果。

達(dá)標(biāo)效果：

這個(gè)是用transition簡(jiǎn)單的過(guò)渡動(dòng)畫(huà)效果，由于好像不是很美觀，所以改良了一下。

改良效果：

這個(gè)是使用animation的動(dòng)畫(huà)效果實(shí)現(xiàn)的，可以看出動(dòng)畫(huà)比較豐富一些，不會(huì)只有一種動(dòng)畫(huà)在動(dòng)。

改良代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>zuoye2</title><style>div{margin: 50px auto 0;width: 600px;height: 194px; background: url(bg_icon.png) 158px 46px/144px 66px, url(21.png) 510px 194px/24px 24px, url(22.png) 539px 194px/23px 24px, url(23.png) 568px 194px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; animation: doMove01 1s forwards; } @keyframes doMove01{ 0%{background: url(bg_icon.png) 150px 32px/175px 96px, url(21.png) 510px 163px/24px 24px, url(22.png) 539px 163px/23px 24px, url(23.png) 568px 163px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat;} 100%{ background: url(bg_icon.png) 158px 46px/144px 66px, url(21.png) 510px 194px/24px 24px, url(22.png) 539px 194px/23px 24px, url(23.png) 568px 194px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } } div:hover{ animation: doMove 1.3s forwards; } @keyframes doMove{ 0%{background: url(bg_icon.png) 156px 44px/147px 69px, url(21.png) 510px 194px/24px 24px, url(22.png) 539px 194px/23px 24px, url(23.png) 568px 194px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 5%{background: url(bg_icon.png) 155px 43px/150px 72px, url(21.png) 510px 170px/24px 24px, url(22.png) 539px 182px/23px 24px, url(23.png) 568px 194px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 10%{background: url(bg_icon.png) 154px 41px/153px 75px, url(21.png) 510px 158px/24px 24px, url(22.png) 539px 170px/23px 24px, url(23.png) 568px 182px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 20%{background: url(bg_icon.png) 153px 39px/159px 81px, url(21.png) 510px 137px/24px 24px, url(22.png) 539px 149px/23px 24px, url(23.png) 568px 161px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 25%{background: url(bg_icon.png) 152px 38px/162px 84px, url(21.png) 510px 149px/24px 24px, url(22.png) 539px 137px/23px 24px, url(23.png) 568px 149px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 30%{background: url(bg_icon.png) 151px 36px/165px 87px, url(21.png) 510px 161px/24px 24px, url(22.png) 539px 149px/23px 24px, url(23.png) 568px 137px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 35%{background: url(bg_icon.png) 150px 34px/168px 90px, url(21.png) 510px 163px/24px 24px, url(22.png) 539px 161px/23px 24px, url(23.png) 568px 149px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 40%{background: url(bg_icon.png) 150px 32px/171x 93px, url(21.png) 510px 163px/24px 24px, url(22.png) 539px 163px/23px 24px, url(23.png) 568px 161px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 45%{background: url(bg_icon.png) 150px 32px/175px 96px, url(21.png) 510px 163px/24px 24px, url(22.png) 539px 163px/23px 24px, url(23.png) 568px 163px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } 100%{background: url(bg_icon.png) 150px 32px/175px 96px, url(21.png) 510px 163px/24px 24px, url(22.png) 539px 163px/23px 24px, url(23.png) 568px 163px/23px 24px, url(zuoye-2.png); background-repeat:no-repeat; } } </style> </head> <body> <div></div> </body> </html>

有更好的意見(jiàn)和想法請(qǐng)?jiān)u論一下。前提是純css實(shí)現(xiàn)的。(O ^ ~ ^ O)

轉(zhuǎn)載于:https://www.cnblogs.com/zhangzhicheng/p/5767963.html

總結(jié)

以上是生活随笔為你收集整理的作业题之动画改良的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。