<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="flyads flyads1">12345</div>
<div class="flyads flyads2">12345</div>
<div class="flyads flyads3">12345</div>
</body>
<style>
.flyads {
background: #009688;
position: absolute;
animation-play-state: running
}
.flyads1{
animation:flyads1 120s infinite linear;
}
.flyads2{
animation:flyads2 120s infinite linear;
}
.flyads3{
animation:flyads3 120s infinite linear;
}
@keyframes flyads3
{
0% {top:50px;right:0;}
10% {top:100px;right:50%}
20% {top:150px;right:100%}
30% {top:200px;right:50%}
40% {top:250px;right:100%}
50% {top:300px;right:50%}
60% {top:350px;right:100%}
70% {top:400px;right:50%}
80% {top:450px;right:100%}
90% {top:500px;right:50%}
100%{top:550px;right:100%}
}
@keyframes flyads2
{
0% {top:0px;left:50%;}
10% {top:50px;left:100%}
20% {top:100px;left:50%}
30% {top:150px;left:100%}
40% {top:200px;left:50%}
50% {top:250px;left:100%}
60% {top:300px;left:50%}
70% {top:350px;left:100%}
80% {top:400px;left:50%}
90% {top:450px;left:100%}
100%{top:500px;left:50%}
}
@keyframes flyads1
{
0% {top:50px;right:50%;}
10% {top:100px;right:100%}
20% {top:150px;right:50%}
30% {top:200px;right:100%}
40% {top:250px;right:50%}
50% {top:300px;right:100%}
60% {top:350px;right:50%}
70% {top:400px;right:100%}
80% {top:450px;right:50%}
90% {top:500px;right:100%}
100%{top:550px;right:50%}
}
.flyads:hover{
animation-play-state: paused;
}
</style>
</html>
![]()
