一、影片模塊連寫
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大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63825.html
標籤：Html/Css
下一篇：自適應寬高