CSS3-7.5-飛機滑翔動畫實現
飛機滑翔動畫實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飛機滑翔</title>
<style type="text/css">
img{
animation:plane 6s ease infinite;
position: absolute;
}
@keyframes plane{
0%{
top:0px;
left: 0px;
}
50%{
top: 35%;
left: 78%;
transform:rotateY(180deg);
}
100%{
top: 80%;
left: 5px;
transform:rotateY(180deg);
}
}
</style>
</head>
<body background="./background.jpg">
<div>
<img src="./plane.png" width="20%">
</div>
</body>
</html>
效果動態圖
