主体只有一个div
<body> <div></div> </body>
样式部分(测试:目前的浏览器还是需要加前缀才能兼容)
<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); /* 动画名字 */ animation-name: move; /* 动画时间 */ animation-duration: 3s; /* 动画的类型 */ animation-timing-function: linear; /* 动画播放次数 */ animation-iteration-count: infinite; /* 动画是否允许反向 */ animation-direction: normal; /* 简写为 animation: move 2s linear 0s infinite normal;*/ } @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>
如有不足之处,请广提意见,诚恳学习.