文章目錄
需求
用h5+css實現一個太陽昇起來,白雲到處飄的動畫
要求太陽只飄起來一次,白雲要在太陽昇起來之後飄來飄去
代碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>藍天白雲</title>
<style>
#box{
height: 700px;
width: 1300px;
background: skyblue;
}
#sun{
height: 100px;
width: 100px;
border-radius: 50%;
background: red;
position: absolute;
animation: sunmove 3s forwards;
}
#cloud{
height: 70px;
width: 200px;
border-radius:50%;
top:120px;
background: white;
position: absolute;
animation: sunmove 3s 3s infinite alternate;
}
@keyframes sunmove{
0%{
left:20px;
}
100%{
left:500px;
}
}
</style>
</head>
<body>
<div id="box">
<div id="sun"></div>
<div id="cloud"></div>
</div>
</body>
</html>
發現的問題和解決方案
- 動畫不動
檢查了很多遍 發現其實是因爲sun和cloud沒有設置position,設置上就好了 - 雲和太陽一起動
給雲設置一個延遲時間 剛好是太陽動畫的時間就行了