绕圈动画——css3事例分享

绕圈结果这种比力难的结果，在此刻css3 的属性中同样可以实现，不消依靠js，这个相关属性比力好用，所以给大师分享一下事例；

东西/原料

1
布局嘛长短常简单的，一个年夜的div 包含着一个 img（图片）一个 div 用来充任‘柱子’
2
我们先节制一下年夜的div 的样式，宽度高度还有边框样式，然后我们用 margin 将年夜div放到页面中心；定位，便利内部元素节制好位置；
3
小div既然是充任‘柱子’的，那么必然也需要将位置定位好，达到如图的结果就可以了（以小我环境，并不是关头属性）
4
然后就是节制 img 的样式，然后给它添加一个挪用， animation：mymove 5s（animation就是挪用声明，mymove是动画法则的名字，5s天然是完当作的时候）
5
然后我们看一下我的动画法则，初始位置是 0px 0px 然后经由过程节制 left 和top 的分歧数值，实现img位置的变更，实现动画结果；（因为定位才可节制 left 和top）
6
然后这是我的整个页面代码大师可以参考一下；和本身的做对比；