绕圈动画——css3事例分享

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

工具/原料

• 电脑
• Sublime text 2

方式/步骤

1. 1

   布局嘛长短常简单的，一个年夜的div 包含着 一个 img（图片）一个 div 用来充任‘柱子’

   
2. 2

   我们先节制一下 年夜的div 的样式，宽度 高度 还有边框样式，然后我们用 margin 将年夜div放到页面中心；定位，便利内部元素节制好位置；

   
3. 3

   小div既然是充任‘柱子’的，那么必然也需要将位置定位好，达到如图的结果就可以了（以小我环境，并不是关头属性）

   
4. 4

   然后就是 节制  img 的样式，然后给它添加一个挪用， animation：mymove 5s（animation就是挪用声明 ，mymove是动画法则的名字，5s天然是完当作的时候）

   
5. 5

   然后我们看一下我的动画法则，初始位置是 0px 0px 然后经由过程节制  left 和top 的分歧数值，实现img位置的变更，实现动画结果；（因为定位才可节制 left 和top）

   
6. 6

   然后这是我的整个页面代码大师可以参考一下；和本身的做对比；

   

注重事项

• 小我进修经验，仅作交流；
• 注重浏览器的兼容性