繞圈動畫——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
然后這是我的整個頁面代碼大師可以參考一下；和本身的做對比；