fab 菜單實現以前傳-鐘錶錶盤

時間 2019-11-07

標籤 fab 菜單實現前傳鐘錶錶盤简体版

原文原文鏈接

　　我的很喜歡谷歌的material design,很喜歡可是沒有動手弄過，今天想動手操做一下Floating Action Button菜單，網上有不少種：圓形、扇形、射線、直線等。我想在一個例子中用到這幾種展示形式，觸發按鈕在不一樣的位置，菜單用不一樣的方式展現……css

　　基於這種需求，開始着手準備，此時遇到一個問題，就是計算彈出按鈕的位置，開始的時候也沒有多想就開始一個一個的計算位置了，在計算的過程當中發現有的座標是同樣的（這裏採用彈出四個菜單），在計算對應的圓形、扇形、半圓形菜單的位置時感受還好是有必定規律的，畫了幾個圖以後發現這不就是鐘錶上12個數字的位置嗎？？？哎！！！因此纔有了這一篇前傳，先弄一個錶盤。html

　　在用css畫一個錶盤的時候，也遇到了一些問題，由於中心原點和12個數字都是用的div，他們都是有大小的（這裏記做：中心圓半徑爲28px，即div的寬高都是28px;數字圓的半徑爲20px，即div的寬高都是20px）。開始的時候，以中心圓圓心爲圓心，已某一值爲半徑（暫記做100px）畫圓，以後12個數字的div的圓心都在前面的圓上。以這種方式，來計算相對位置，即12個數字圓的left和top，很麻煩，由於存在着座標平移……後來一想爲何不能將兩個座標系的中心重合，以後再去計算位置簡單多了（不存在座標平移）。實現方式就是12個數字圓放在一個div中，這個div的高度和寬度都是0，位置放在中心圓的圓心位置，單個數字圓的實現方式相似……git

　　方式定了以後就是具體的位置計算了，這裏用的是三角函數，由於這裏沒有使用js，要想在css中實現三角函數就只能less或者其餘了（就是用過他，他的沒有研究，聽說scss沒有內置，還得本身寫……），上一張圖，說明一下12個數字圓對應在座標系中的位置，該用什麼度數計算三角函數值：github

　　三點鐘方向算是0度，四點鐘爲30度，順時針旋轉，依此類推……畫這個圖太費勁了，關鍵是不知道哪裏有這樣的工具，這裏是在一個在線網站上畫的，畫完以後是能夠分享的，分享一下連接地址：https://www.desmos.com/calculator/a9sdt0or3s bash

　　下面貼一下代碼：less

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fab 菜單實現以前傳-鐘錶錶盤</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="page-container">
        <div class="fab-menu-container">
            <div class="fab-trigger"><i class="icon icon-heart"></i></div>
            <div class="fab-action-container">
                <div class="action">
                    <div class="action-content">1</div>
                </div>
                <div class="action">
                    <div class="action-content">2</div>
                </div>
                <div class="action">
                    <div class="action-content">3</div>
                </div>
                <div class="action">
                    <div class="action-content">4</div>
                </div>
                <div class="action">
                    <div class="action-content">5</div>
                </div>
                <div class="action">
                    <div class="action-content">6</div>
                </div>
                <div class="action">
                    <div class="action-content">7</div>
                </div>
                <div class="action">
                    <div class="action-content">8</div>
                </div>
                <div class="action">
                    <div class="action-content">9</div>
                </div>
                <div class="action">
                    <div class="action-content">10</div>
                </div>
                <div class="action">
                    <div class="action-content">11</div>
                </div>
                <div class="action">
                    <div class="action-content">12</div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

html代碼

// 一、 純CSS圖標 ********開始********

// 圖標通用樣式
.icon {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-style: normal;
    color: #ddd;
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
}

.icon::after,
.icon::before {
    content: '';
    pointer-events: none;
}

// 加號圖標
.icon-plus {
    width: 30px;
    height: 30px;
}

.icon-plus::before {
    width: 20px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 0 32px;
}

.icon-plus::after {
    height: 20px;
    width: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 0 32px;
}

// 心型圖標
.icon-heart {
    width: 20px;
    height: 20px;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
    border-radius: 7px 0;
    margin: 9px 7px 5px;
    border-bottom: 2px solid;
    border-right: 2px solid;
}

.icon-heart::before {
    width: 12px;
    height: 20px;
    position: absolute;
    left: -10px;
    bottom: -2px;
    border-radius: 20px 0 0 20px;
    border: 2px solid;
    border-right: none;
}

.icon-heart::after {
    width: 20px;
    height: 12px;
    right: -2px;
    top: -10px;
    border-radius: 20px 20px 0 0;
    position: absolute;
    border: 2px solid;
    border-bottom: none;
}

// 純CSS圖標 ********結束********

@fabTriggerRadius: 28px;
@fabActionRadius: 20px;
@distanceBetweenCircleCenter: 100px;
@fabActionCounter: 12;

*,
*::after,
*::before {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.page-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-menu-container {
    width: 2 * @fabTriggerRadius;
    height: 2 * @fabTriggerRadius;
    position: fixed;

    >.fab-trigger {
        height: 100%;
        width: 100%;
        //background-color: #06C;
        color: #FFF;
        //box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    >.fab-action-container {
        height: 0;
        width: 0;
        // background-color: red;
        position: absolute;
        top: @fabTriggerRadius;
        left: @fabTriggerRadius;

        >.action {
            height: 0;
            width: 0;
            position: absolute;

            .for(@i) when (@i <=@fabActionCounter) {

                &:nth-child(@{i}) {
                    left: @distanceBetweenCircleCenter * cos((@i - 3)*30deg);
                    top: @distanceBetweenCircleCenter * sin((@i - 3)*30deg);
                }

                .for((@i + 1));
            }

            .for(1);

            >.action-content {
                width: 2 * @fabActionRadius;
                height: 2 * @fabActionRadius;
                position: absolute;
                top: -@fabActionRadius;
                left: -@fabActionRadius;
                display: flex;
                align-items: center;
                justify-content: center;
                // background-color: red;
            }
        }
    }
}