The subject has only one div
< Body > < Div ></ Div > </ Body >
Style section (test: The current browser still needs to be prefixed to be compatible)
<style> * {margin:0;padding:0; }Div{position:Absolute;Top:0; Left:0;width:100px;Height:100px;Border-radius:50px;Border:2px solid Red;background:-webkit-radial-gradient (80px 80px, Circle, #fff, #00f);background:-ms-radial-gradient (80px 80px, Circle, #fff, #00f); /*Animated name*/Animation-name:Move; /*Animation Time*/animation-duration:3s; /*Types of animations*/animation-timing-function:Linear; /*number of animation plays*/Animation-iteration-count:Infinite; /*whether the animation allows reverse*/animation-direction:Normal; /*abbreviated to animation:move 2s linear 0s infinite normal;*/ }@-webkit-keyframes Move{0% { left:0px;Top:0px; }25%{ Left:150px;Top:150px; }50%{ Left:300px;Top:300px; }75%{ Left:450px;Top:450px; }100%{ Left:600px;Top:600px; }} @-ms-keyframes Move{0% { left:0px;Top:0px; }25%{ Left:150px;Top:150px; }50%{ Left:300px;Top:300px; }75%{ Left:450px;Top:450px; }100%{ Left:600px;Top:600px; } } </style>
If there are deficiencies, please ask for advice, sincere study.
CSS Animation Properties--small ball movement