HTML與CSS中的動(dòng)畫(huà)模塊怎么用

這篇文章主要介紹了HTML與CSS中的動(dòng)畫(huà)模塊怎么用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇HTML與CSS中的動(dòng)畫(huà)模塊怎么用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的膠州網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

一.動(dòng)畫(huà)模塊

1.過(guò)渡和動(dòng)畫(huà)之間的異同

1.1不同點(diǎn)

過(guò)渡必須人為的觸發(fā)才會(huì)執(zhí)行動(dòng)畫(huà)

動(dòng)畫(huà)不需要人為的觸發(fā)就可以執(zhí)行動(dòng)畫(huà)

1.2相同點(diǎn)

過(guò)渡和動(dòng)畫(huà)都是用來(lái)給元素添加動(dòng)畫(huà)的

過(guò)渡和動(dòng)畫(huà)都是系統(tǒng)新增的一些屬性

過(guò)渡和動(dòng)畫(huà)都需要滿足三要素才會(huì)有動(dòng)畫(huà)效果

2動(dòng)畫(huà)三要素

2.1告訴系統(tǒng)需要執(zhí)行哪個(gè)動(dòng)畫(huà)

2.2告訴系統(tǒng)我們需要自己創(chuàng)建一個(gè)名稱(chēng)叫做lnj的動(dòng)畫(huà)

2.3告訴系統(tǒng)動(dòng)畫(huà)持續(xù)的時(shí)長(zhǎng)

p{width:100px;

height:50px;

background-color:red;

/*1.告訴系統(tǒng)需要執(zhí)行哪個(gè)動(dòng)畫(huà)*/

animation-name:lnj;

/*3.告訴系統(tǒng)動(dòng)畫(huà)持續(xù)的時(shí)長(zhǎng)*/

animation-duration:3s;}

/*2.告訴系統(tǒng)我們需要自己創(chuàng)建一個(gè)名稱(chēng)叫做lnj的動(dòng)畫(huà)*/

@keyframeslnj{

from{margin-left:0;}

to{margin-left:500px;}

}

二.動(dòng)畫(huà)模塊-其它屬性(上)

p{

width:100px;

height:50px;

background-color:red;

animation-name:sport;

animation-duration:2s;

/*告訴系統(tǒng)多少秒之后開(kāi)始執(zhí)行動(dòng)畫(huà)*/

/*animation-delay:2s;*/

/*告訴系統(tǒng)動(dòng)畫(huà)執(zhí)行的速度*/

animation-timing-function:linear;

/*告訴系統(tǒng)動(dòng)畫(huà)需要執(zhí)行幾次*/

animation-iteration-count:3;

//infinite:無(wú)限的

/*告訴系統(tǒng)是否需要執(zhí)行往返動(dòng)畫(huà)

取值:normal,默認(rèn)的取值,執(zhí)行完一次之后回到起點(diǎn)繼續(xù)執(zhí)行下一次

alternate,往返動(dòng)畫(huà),執(zhí)行完一次之后往回執(zhí)行下一次

*/animation-direction:alternate;}

@keyframessport{

from{margin-left:0;}

to{margin-left:500px;}}

p:hover{

/*告訴系統(tǒng)當(dāng)前動(dòng)畫(huà)是否需要暫停

取值:running:執(zhí)行動(dòng)畫(huà),默認(rèn)取值

paused:暫停動(dòng)畫(huà),當(dāng)動(dòng)畫(huà)執(zhí)行時(shí),鼠標(biāo)hover到p上方時(shí),動(dòng)畫(huà)停止,鼠標(biāo)移開(kāi),則繼續(xù)動(dòng)畫(huà);

*/

animation-play-state:paused;}

三.動(dòng)畫(huà)模塊-其它屬性(下)

.box2{

width:200px;

height:200px;

background-color:blue;

margin:100pxauto;

animation-name:myRotate;

animation-duration:5s;

animation-delay:2s;

/*通過(guò)我們的觀察,動(dòng)畫(huà)是有一定的狀態(tài)的

1.等待狀態(tài)2.執(zhí)行狀態(tài)3.結(jié)束狀態(tài)*/

/*animation-fill-mode作用:指定動(dòng)畫(huà)等待狀態(tài)和結(jié)束狀態(tài)的樣式

取值:none:不做任何改變

forwards:讓元素結(jié)束狀態(tài)保持動(dòng)畫(huà)最后一幀的樣式;

//向前的

backwards:讓元素等待狀態(tài)的時(shí)候顯示動(dòng)畫(huà)第一幀的樣式;

//向后的

both:讓元素等待狀態(tài)顯示動(dòng)畫(huà)第一幀的樣式,讓元素結(jié)束狀態(tài)保持動(dòng)畫(huà)最后一幀的樣式

*/

/*animation-fill-mode:backwards;*/

/*animation-fill-mode:forwards;*/

animation-fill-mode:both;}

@keyframesmyRotate{

0%{transform:rotate(10deg);}

50%{transform:rotate(50deg);}

100%{transform:rotate(70deg);}

}

animation-fill-mode

四.動(dòng)畫(huà)模塊-連寫(xiě)

1.動(dòng)畫(huà)模塊連寫(xiě)格式

animation:動(dòng)畫(huà)名稱(chēng)動(dòng)畫(huà)時(shí)長(zhǎng)動(dòng)畫(huà)運(yùn)動(dòng)速度延遲時(shí)間執(zhí)行次數(shù)往返動(dòng)畫(huà);

2.動(dòng)畫(huà)模塊連寫(xiě)格式的簡(jiǎn)寫(xiě)

animation:動(dòng)畫(huà)名稱(chēng)動(dòng)畫(huà)時(shí)長(zhǎng);

五.云層效果

<htmllang="en"><head>

<metacharset="UTF-8"><title>104-動(dòng)畫(huà)模塊-云層效果</title><style>

*{margin:0;padding:0;}

ul{height:400px;background-color:skyblue;

margin-top:100px;animation:change5slinear0sinfinitealternate;

position:relative;overflow:hidden;//讓屏幕下方的滾動(dòng)條隱藏掉}

ulli{list-style:none;width:400%;

//設(shè)置li的寬度為屏幕的四倍,移動(dòng)最多的為屏幕寬度的三倍,為保證屏幕內(nèi)一直有云朵,故多設(shè)置一個(gè)屏幕的寬度的云朵

height:100%;position:absolute;

//設(shè)置子絕父相后,三個(gè)li會(huì)重疊到一起

left:0;top:0;}ulli:nth-child(1){

background-image:url("images/cloud_one.png");

animation:one30slinear0sinfinitealternate;}

ulli:nth-child(2){background-image:url("images/cloud_two.png");

animation:two30slinear0sinfinitealternate;}

ulli:nth-child(3){background-image:url("images/cloud_three.png");

animation:three30slinear0sinfinitealternate;}

@keyframeschange{

from{background-color:skyblue;}

to{background-color:black;}}

@keyframesone{

from{margin-left:0;}

to{margin-left:-100%;

//如果先往右移動(dòng),又出現(xiàn)屏幕上有一節(jié)沒(méi)云朵的情況,故先往左移動(dòng);

}}

@keyframestwo{

from{margin-left:0;}

to{margin-left:-200%;

//由于動(dòng)畫(huà)的時(shí)間都一樣,但是運(yùn)動(dòng)的距離不一樣,又由于都是線性速度,所以就會(huì)出現(xiàn)有點(diǎn)運(yùn)動(dòng)快,有的運(yùn)動(dòng)慢!

}}

@keyframesthree{from{margin-left:0;}

to{margin-left:-300%;}}

</style></head><body><ul><li></li><li></li><li></li></ul></body></html>

六.無(wú)限滾動(dòng)

<htmllang="en"><head><metacharset="UTF-8"><title>105-動(dòng)畫(huà)模塊-無(wú)限滾動(dòng)</title>

<style>*{margin:0;padding:0;}

p{width:600px;height:188px;border:1pxsolid#000;

margin:100pxauto;overflow:hidden;}ul{width:2000px;

//這個(gè)無(wú)限滾動(dòng)原理就是ul做動(dòng)畫(huà)

height:188px;background-color:black;

//背景顏色黑色,當(dāng)li的透明度為半透明時(shí),li就會(huì)有黑色蒙版效果

animation:move10slinear0sinfinitenormal;

//name時(shí)間速度延時(shí)無(wú)限重復(fù)是否往返(normal代表不往返)

}

ulli{float:left;list-style:none;width:300px;

height:188px;background-color:red;

border:1pxsolid#000;box-sizing:border-box;}

ul:hover{

/*動(dòng)畫(huà)添加給誰(shuí),就讓誰(shuí)停止*/

animation-play-state:paused;}

ul:hoverli{opacity:0.5;

//當(dāng)li的透明度為0.5時(shí),就會(huì)看到父元素的背景顏色(黑色),就會(huì)有蒙版效果

}

ulli:hover{opacity:1;

//透明度為1,不透明,看不到父元素的背景色,故沒(méi)有蒙版效果

}@keyframesmove{

from{margin-left:0;}

to{margin-left:-1200px;

//只需要移除屏幕4個(gè)li的寬度就可.屏幕上就會(huì)顯示第5.6兩個(gè)li,這時(shí),原本的動(dòng)畫(huà)就會(huì)恢復(fù)的原來(lái)的位置接著動(dòng)畫(huà),實(shí)現(xiàn)了無(wú)線滾動(dòng)效果

}}</style></head><body><p><ul>

<li>![](images/banner1.png)</li><li>![](images/banner2.jpg)</li>

<li>![](images/banner3.jpg)</li><li>![](images/banner4.jpg)</li>

//把前兩個(gè)li加在后面,起到過(guò)度效果;動(dòng)畫(huà)不會(huì)顯得太生硬.

<li>![](images/banner1.png)</li><li>![](images/banner2.jpg)</li>

</ul></p></body></html>

關(guān)于“HTML與CSS中的動(dòng)畫(huà)模塊怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“HTML與CSS中的動(dòng)畫(huà)模塊怎么用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：HTML與CSS中的動(dòng)畫(huà)模塊怎么用
地址分享：http://muchs.cn/article22/jooocc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、電子商務(wù)、用戶體驗(yàn)、定制開(kāi)發(fā)、網(wǎng)站制作、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站