border-radius就可以做到了，
圆形，就把四个角都设置成宽高的一半，就是50%，或者是固定值，，
注意的是，如果你是直接用Img标签的话，那你的Img
宽高要一样，就是说要是正方形，
如果你是通过容器来实现的话，你就直接把容器设置成正方形，border-radius:50%然后再background图片就可以了。
你的代码里面只有位置移动的top,left。没有写旋转的代码。在动画帧时加入rotate(角度)就可以旋转并移动，可以参考下面代码。
相关示例如下：
<style>
.ani{animation:box 1s linear 0s infinitewidth:100pxheight:100pxbackground:greenborder-radius:50%}
@keyframes box{0% {transform:rotate(0deg)translate(0,0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0)}75%{transform:rotate(270deg)}100% {transform:rotate(360deg)translate(0,0)}}
</style>
<div class="ani"></div>
CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
围观一堆坑货。人家说的是CSS实现。
CSS3以下的是几乎无法实现的(可以利用.HTC这种古董东西)
实现代码(简化过了，只包含关键代码，不可直接使用)：
<!DOCTYPE html><!-- 上面的DocType是HTML5声明防止某些浏览器不识别，旧版本IE(低于或者等于IE8)无效 -->
<div class="outer">
<div class="inner">
</div></div> .outer {
background:pink
width:100%height:100%
position:relative
}
/* 为了实现透明效果我们要有个背景 */
.inner {
background:black
width:300pxheight:300px
position:absolute
border-radius:100%
behavior:url(yourbehavior.htc)
}
/* 用CSS3新特性圆角来做出圆形效果，border-radius设定为100%为完全圆角(把整个元素变成椭圆形，如果是像素则会制作出一个绝对正圆的圆角，类似圆角长方形或者香肠形)。
宽高必须相等才是正圆。
位置相对定位来保证圆的位置，本例随便做的位置。
behavior是IE低版本的一个绘图功能组件，现在网上有许多可以现成使用的behavior，例如PIE.htc，挑选一个能实现圆角效果并且最适合你的插件来安装使用 */
当然，PNG实现是最简单的，也是最不负责的
