绕圈效果这种比较难的效果，在现在css3 的属性中同样可以实现，不用依靠js，这个相关属性比较好用，所以给大家分享一下事例；
工具/原料
1
电脑
2
Sublime text 2
方法/步骤
1
结构嘛是非常简单的，一个大的div 包含着 一个 img（图片）一个 div 用来充当‘柱子’
2
我们先控制一下 大的div 的样式，宽度 高度 还有边框样式，然后我们用 margin 将大div放到页面中间；定位，方便内部元素控制好位置；
3
小div既然是充当‘柱子’的，那么必然也需要将位置定位好，达到如图的效果就可以了（以个人情况，并不是关键属性）
5
然后我们看一下我的动画规则，初始位置是 0px 0px 然后通过控制 left 和top 的不同数值，实现img位置的变动，实现动画效果；（因为定位才可控制 left 和top）
6
然后这是我的整个页面代码大家可以参考一下；和自己的做对比；
注意事项
1
个人学习经验，仅作交流；
2
注意浏览器的兼容性
上一篇：水果食疗山竹饮品的多种做法