<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:20%;
height:20%;
position:relative;
animation: myfirst 30s infinite;
animation-direction:alternate;
-moz-animation: myfirst 30s infinite; /* Firefox */
-moz-animation-direction:alternate;
-webkit-animation: myfirst 30s infinite; /* Safari 和 Chrome */
-webkit-animation-direction:alternate;
-o-animation: myfirst 30s infinite; /* Opera */
-o-animation-direction:alternate;
}
@keyframes myfirst
{
0% {left:0%; margin-top:2%;}
50% {left:80%; margin-top:15%;}
/*75% {left:80%; margin-top:30%;}*/
100% {left:0%; margin-top:35%;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {left:0%; margin-top:2%;}
50% {left:80%; margin-top:15%;}
/*75% {left:80%; margin-top:30%;}*/
100% {left:0%; margin-top:35%;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {left:0%; margin-top:2%;}
50% {left:80%; margin-top:15%;}
/*75% {left:80%; margin-top:30%;}*/
100% {left:0%; margin-top:35%;}
}
@-o-keyframes myfirst /* Opera */
{
0% {left:0%; margin-top:2%;}
50% {left:80%; margin-top:15%;}
/*75% {left:80%; margin-top:30%;}*/
100% {left:0%; margin-top:35%;}
}
</style>
<body>
<div >
<img src="ph1.png" width="100%" height="100%">
</div>
</body>
</html>
![web前端布局练手项目[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)