一、動畫模塊連寫 1.animation：動畫名稱 動畫時長 動畫運動速度 延遲時間 重覆次數 是否迴圈往複 2.簡寫：animation:動畫名稱 動畫時長； <style> *{ padding:0; margin:0; } div{ width: 100px; height: 50px; ba ...
一、動畫模塊連寫
1.animation：動畫名稱 動畫時長 動畫運動速度 延遲時間 重覆次數 是否迴圈往複
2.簡寫：animation:動畫名稱 動畫時長；
<style>
*{
padding:0;
margin:0;
}
div{
width: 100px;
height: 50px;
background-color: red;
animation:move 1s linear 1s 2 normal;
/*動畫名稱 持續時間 運動速度 延遲時間 重覆次數 是否迴圈往複*/
}
@keyframes move{
from{
margin-left:0;
}
to{
margin-left:500px;
}
}
..........省略代碼...........
<div></div>
二、雲層圖片
1.註意點：（1）反向移動；（2）利用li的四倍距離，能充分得動覆蓋；（3）調整移動速度兩種：一種直接調整運動的速度，一種是移動的幅度，也是移動的距離；（4）顏色也可以漸變。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D179_CloudAnimation</title> <style> *{ margin:0; padding:0; } ul{ height: 396px; background-color: skyblue; margin-top:100px; animation:change 5s linear 0s infinite alternate;/*infinite代表無限次的執行難下去*/ position:relative; } ul li { width: 400%;/*複習了百分比的表示方式,這個四百很重要*/ /*因為有三個li標簽，並且寬度變化最多是三倍，因此，我們的li需要有四倍，完成它的延展長度*/ height: 350px; position:absolute; left:0; top:22px; list-style: none; } ul li:nth-child(1){ background-image: url("image/play_tennis2.jpg"); animation:one 10s linear 0s infinite alternate; } ul li:nth-child(2){ background-image: url("image/play_tennis2.jpg"); animation:two 10s linear 0s infinite alternate; } ul li:nth-child(3){ background-image: url("image/play_tennis2.jpg"); animation:three 10s linear 0s infinite alternate; } @keyframes change { form{ background-color: skyblue; } to { background-color: grey; } } @keyframes one { from{ margin-left:0; } to{ margin-left:-100%;/*這裡都是反向移動也就是向左移動，如果向右移動，那麼左邊就會有空白出現了*/ } } @keyframes two { from{ margin-left:0; } to{ margin-left:-200%; } } @keyframes three { from{ margin-left:0; } to{ margin-left:-300%; } } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
三、源碼：
D178_AnimationWritingContinuely.html
D179_CloudAnimation.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D178_AnimationWritingContinuely.html
https://github.com/ruigege66/HTML_learning/blob/master/D179_CloudAnimation.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
