<html>
<head>
<title></title>
<style type="text/css">
#page{
position: relative;
width: 100%;
overflow: hidden;
}
#sky{
width: 100%;
height: 680px;
position: relative;
}
#cloud{
position: absolute;
-webkit-animation: cloud_run .7s ease 0s infinite normal;
}
@-webkit-keyframes cloud_run{
from{
top:-150px;
left: 70%;
width: 700px;
}
to{
top:733px;
left: 0%;
width: 100%;
}
}
#rocket{
position: absolute;
z-index: 10;
width: 70%;
-webkit-animation: rocket_run .1s linear 0s infinite normal;
}
@-webkit-keyframes rocket_run{
from{
top: 0;
left: 0;
}
to{
top: -5px;
left: 0px;
}
}
</style>
</head>
<body>
<div id="page">
<img id="sky" src="https://img-my.csdn.net/uploads/201505/05/1430803267_9777.jpg-thumb.jpg">
<img id="cloud" src="https://img-my.csdn.net/uploads/201505/05/1430803263_2305.png-thumb.jpg">
<img id="rocket" src="https://img-my.csdn.net/uploads/201505/05/1430803267_9115.png">
<div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
<head>
<title></title>
<style type="text/css">
#page{
position: relative;
width: 100%;
overflow: hidden;
}
#sky{
width: 100%;
height: 680px;
position: relative;
}
#cloud{
position: absolute;
-webkit-animation: cloud_run .7s ease 0s infinite normal;
}
@-webkit-keyframes cloud_run{
from{
top:-150px;
left: 70%;
width: 700px;
}
to{
top:733px;
left: 0%;
width: 100%;
}
}
#rocket{
position: absolute;
z-index: 10;
width: 70%;
-webkit-animation: rocket_run .1s linear 0s infinite normal;
}
@-webkit-keyframes rocket_run{
from{
top: 0;
left: 0;
}
to{
top: -5px;
left: 0px;
}
}
</style>
</head>
<body>
<div id="page">
<img id="sky" src="https://img-my.csdn.net/uploads/201505/05/1430803267_9777.jpg-thumb.jpg">
<img id="cloud" src="https://img-my.csdn.net/uploads/201505/05/1430803263_2305.png-thumb.jpg">
<img id="rocket" src="https://img-my.csdn.net/uploads/201505/05/1430803267_9115.png">
<div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>