溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了HTML與CSS中的動畫模塊怎么用的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML與CSS中的動畫模塊怎么用文章都會有所收獲，下面我們一起來看看吧。
一.動畫模塊
1.過渡和動畫之間的異同
1.1不同點
過渡必須人為的觸發(fā)才會執(zhí)行動畫
動畫不需要人為的觸發(fā)就可以執(zhí)行動畫
1.2相同點
過渡和動畫都是用來給元素添加動畫的
過渡和動畫都是系統(tǒng)新增的一些屬性
過渡和動畫都需要滿足三要素才會有動畫效果
2動畫三要素
2.1告訴系統(tǒng)需要執(zhí)行哪個動畫
2.2告訴系統(tǒng)我們需要自己創(chuàng)建一個名稱叫做lnj的動畫
2.3告訴系統(tǒng)動畫持續(xù)的時長
p{width:100px;
height:50px;
background-color:red;
/*1.告訴系統(tǒng)需要執(zhí)行哪個動畫*/
animation-name:lnj;
/*3.告訴系統(tǒng)動畫持續(xù)的時長*/
animation-duration:3s;}
/*2.告訴系統(tǒng)我們需要自己創(chuàng)建一個名稱叫做lnj的動畫*/
@keyframeslnj{
from{margin-left:0;}
to{margin-left:500px;}
}
二.動畫模塊-其它屬性(上)
p{
width:100px;
height:50px;
background-color:red;
animation-name:sport;
animation-duration:2s;
/*告訴系統(tǒng)多少秒之后開始執(zhí)行動畫*/
/*animation-delay:2s;*/
/*告訴系統(tǒng)動畫執(zhí)行的速度*/
animation-timing-function:linear;
/*告訴系統(tǒng)動畫需要執(zhí)行幾次*/
animation-iteration-count:3;
//infinite:無限的
/*告訴系統(tǒng)是否需要執(zhí)行往返動畫
取值:normal,默認的取值,執(zhí)行完一次之后回到起點繼續(xù)執(zhí)行下一次
alternate,往返動畫,執(zhí)行完一次之后往回執(zhí)行下一次
*/animation-direction:alternate;}
@keyframessport{
from{margin-left:0;}
to{margin-left:500px;}}
p:hover{
/*告訴系統(tǒng)當前動畫是否需要暫停
取值:running:執(zhí)行動畫,默認取值
paused:暫停動畫,當動畫執(zhí)行時,鼠標hover到p上方時,動畫停止,鼠標移開,則繼續(xù)動畫;
*/
animation-play-state:paused;}
三.動畫模塊-其它屬性(下)
.box2{
width:200px;
height:200px;
background-color:blue;
margin:100pxauto;
animation-name:myRotate;
animation-duration:5s;
animation-delay:2s;
/*通過我們的觀察,動畫是有一定的狀態(tài)的
1.等待狀態(tài)2.執(zhí)行狀態(tài)3.結(jié)束狀態(tài)*/
/*animation-fill-mode作用:指定動畫等待狀態(tài)和結(jié)束狀態(tài)的樣式
取值:none:不做任何改變
forwards:讓元素結(jié)束狀態(tài)保持動畫最后一幀的樣式;
//向前的
backwards:讓元素等待狀態(tài)的時候顯示動畫第一幀的樣式;
//向后的
both:讓元素等待狀態(tài)顯示動畫第一幀的樣式,讓元素結(jié)束狀態(tài)保持動畫最后一幀的樣式
*/
/*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
四.動畫模塊-連寫
1.動畫模塊連寫格式
animation:動畫名稱動畫時長動畫運動速度延遲時間執(zhí)行次數(shù)往返動畫;
2.動畫模塊連寫格式的簡寫
animation:動畫名稱動畫時長;
五.云層效果
<htmllang="en"><head>
<metacharset="UTF-8"><title>104-動畫模塊-云層效果</title><style>
*{margin:0;padding:0;}
ul{height:400px;background-color:skyblue;
margin-top:100px;animation:change5slinear0sinfinitealternate;
position:relative;overflow:hidden;//讓屏幕下方的滾動條隱藏掉}
ulli{list-style:none;width:400%;
//設置li的寬度為屏幕的四倍,移動最多的為屏幕寬度的三倍,為保證屏幕內(nèi)一直有云朵,故多設置一個屏幕的寬度的云朵
height:100%;position:absolute;
//設置子絕父相后,三個li會重疊到一起
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%;
//如果先往右移動,又出現(xiàn)屏幕上有一節(jié)沒云朵的情況,故先往左移動;
}}
@keyframestwo{
from{margin-left:0;}
to{margin-left:-200%;
//由于動畫的時間都一樣,但是運動的距離不一樣,又由于都是線性速度,所以就會出現(xiàn)有點運動快,有的運動慢!
}}
@keyframesthree{from{margin-left:0;}
to{margin-left:-300%;}}
</style></head><body><ul><li></li><li></li><li></li></ul></body></html>
六.無限滾動
<htmllang="en"><head><metacharset="UTF-8"><title>105-動畫模塊-無限滾動</title>
<style>*{margin:0;padding:0;}
p{width:600px;height:188px;border:1pxsolid#000;
margin:100pxauto;overflow:hidden;}ul{width:2000px;
//這個無限滾動原理就是ul做動畫
height:188px;background-color:black;
//背景顏色黑色,當li的透明度為半透明時,li就會有黑色蒙版效果
animation:move10slinear0sinfinitenormal;
//name時間速度延時無限重復是否往返(normal代表不往返)
}
ulli{float:left;list-style:none;width:300px;
height:188px;background-color:red;
border:1pxsolid#000;box-sizing:border-box;}
ul:hover{
/*動畫添加給誰,就讓誰停止*/
animation-play-state:paused;}
ul:hoverli{opacity:0.5;
//當li的透明度為0.5時,就會看到父元素的背景顏色(黑色),就會有蒙版效果
}
ulli:hover{opacity:1;
//透明度為1,不透明,看不到父元素的背景色,故沒有蒙版效果
}@keyframesmove{
from{margin-left:0;}
to{margin-left:-1200px;
//只需要移除屏幕4個li的寬度就可.屏幕上就會顯示第5.6兩個li,這時,原本的動畫就會恢復的原來的位置接著動畫,實現(xiàn)了無線滾動效果
}}</style></head><body><p><ul>
<li></li><li></li>
<li></li><li></li>
//把前兩個li加在后面,起到過度效果;動畫不會顯得太生硬.
<li></li><li></li>
</ul></p></body></html>
關于“HTML與CSS中的動畫模塊怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“HTML與CSS中的動畫模塊怎么用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
