less做個徑向選單

在慕課網發現了乙個有意思的課程，叫數學知識在css動畫中的應用。用到的數學知識是如何計算圓上每個點的座標。統一名稱，中間的選單叫觸發選單，四周發散的選單叫子選單，

效果預覽

慕課網通過jquery計算子選單的座標，控制相應的css屬性，來實現這一功能。

有關計算，又有關css屬性，那麼css預處理器便是乙個不錯的選擇。

scss基於ruby，使用在伺服器端。less基於node，可以直接在瀏覽器端使用，但會消耗更多的效能。所以兩者一般都會在前期使用工具編譯為css。scss不支援三角函式，less卻能夠很好的支援三角函式，less便成了乙個不錯的選擇。

先把大致布局放在這裡。

12 3456 78910 1112

把徑向選單置於視窗中間，可以使用絕對定位，然後使它居中。寫乙個mixin

.center()

以下mixin表示乙個以@radius為半徑，@color為背景的乙個圓。圓是乙個圓角半徑為50%的正方形。box-sizing: border-box使得可以給圓新增邊框長度而不至於使圓變形。

.radius(@radius, @color: transparent)

.container表示子選單所在的圓，.circle為子選單，初始化時無大小，text-align與line-height控制字型居中。

.container .circle

點選觸發選單會使子選單發散。checkbox通過:checked偽類選擇器可以模擬點選觸發的效果，使它的透明度改為0，再增加乙個裝飾的.btn設定背景，使它看起來像乙個按鈕。

.btn, 
.toggle 
.toggle 
}

點選觸發選單會使子選單發散開來。此時子選單的選擇器應該使用~選擇器。計算其位置設定translate的平移屬性，並設定動畫。

less使用迴圈生成每個子選單的位置，count是子選單的數量。不得不說，還是scss的for迴圈好用太多。

注意其下用的是nth-of-type。

.generate-circle(@i: 1) when (@i < @count + 1) ) 
}.generate-circle(@i + 1);
}

使用less做的徑向選單

效果預覽

less語言特性

再談 css 預處理器

數學知識在css動畫中的應用