<div class="dh" id="kf"></div>
<div class="dh" id="kf1"></div>
<div class="dh" id="kf2"></div>
@keyframes change{
0% {left:0px; top:0px;}
25% {left:200px; top:300px;}
50% {left:400px; top:680px;}
75% {left:600px; top:300px;}
100% {left:800px; top:0px;}
}
@-webkit-keyframes change{
0% {left:0px; top:0px;}
25% {left:200px; top:300px;}
50% {left:400px; top:680px;}
75% {left:600px; top:300px;}
100% {left:800px; top:0px;}
}
@keyframes change1{
0% {left:0px; top:0px;}
25% {left:-200px; top:300px;}
50% {left:-400px; top:680px;}
75% {left:-600px; top:300px;}
100% {left:-800px; top:0px;}
}
@-webkit-keyframes change1{
0% {left:0px; top:0px;}
25% {left:-200px; top:300px;}
50% {left:-400px; top:680px;}
75% {left:-600px; top:300px;}
100% {left:-800px; top:0px;}
}
@keyframes change2{
0% {left:0px; top:0px;}
25% {left:-200px; top:680px;}
50% {left:-400px; top:0px;}
75% {left:-100px; top:680px;}
100% {left:100px; top:0px;}
}
@-webkit-keyframes change2{
0% {left:0px; top:0px;}
25% {left:-200px; top:300px;}
50% {left:-400px; top:680px;}
75% {left:-600px; top:300px;}
100% {left:-800px; top:0px;}
}
.dh{
width:100px;
height:100px;
border-radius:50px;
animation:change 10s;
position:relative;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
.dh:hover{
animation-play-state: paused
}
#kf{
animation-name:change;
float:left;
background:linear-gradient(to top right, red,white,blue);
}
#kf1{
float:right;
background:linear-gradient(to top right, #FC0 , white , #FF0);
animation-name:change1;
}
#kf2{
float:left;
margin-left:500px;
background:linear-gradient(to top right, red , white , #FF0);
animation-name:change2;
}
欢迎指教