fab 菜單實現之前傳-鐘錶表盤

来源:https://www.cnblogs.com/du-blog/archive/2019/02/25/10433592.html
-Advertisement-
Play Games

個人很喜歡谷歌的material design,很喜歡但是沒有動手弄過，今天想動手操作一下Floating Action Button菜單，網上有很多種：圓形、扇形、射線、直線等。我想在一個例子中用到這幾種展現形式，觸發按鈕在不同的位置，菜單用不同的方式展示…… 基於這種需求，開始著手準備，此時遇到 ...


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

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

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

　　方式定了之後就是具體的位置計算了，這裡用的是三角函數，因為這裡沒有使用js，要想在css中實現三角函數就只能less或者其他了（就是用過他，他的沒有研究，據說scss沒有內置，還得自己寫……），上一張圖，說明一下12個數字圓對應在坐標系中的位置，該用什麼度數計算三角函數值：

　　

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

　　

　　下麵貼一下代碼：

<!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代碼 
// 1、 純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;
            }
        }
    }
}
less代碼

　　至此，這篇文章就結束了。這裡在記錄幾個網址：

　　1、35 Cool Floating Action Button Animations

　　2、Less 線上編譯器

　　3、https://www.desmos.com/

　　4、http://www.matools.com/less

　　以下為純CSS圖標：

　　5、https://codepen.io/stiffi/pen/ysbCd

　　6、https://codepen.io/tidusxujun/pen/GgNxxP

　　7、https://codepen.io/airpwn/pen/hgdBc


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • The operation could not be performed because OLE DB provider "SQLNCLI11" for linked server "SDSSDFCC" was unable to begin a distributed transaction.
    Question： SQL SERVER 通過Linkserver連接A和B 2台，A對B執行單條的增刪改查沒有異常（沒有配置DTC） 但是開啟事務後就會出現報錯 Solution: 在A和B上配置DTC（控制面板→管理工具→組件服務），配置參數如下： 再次測試無異常 開啟事務前Set XACT_A ...
  • 該帳戶當前被鎖定，所以用戶sa登錄失敗。系統管理員無法將該帳戶解鎖
    原文鏈接：https://www.cnblogs.com/wtujvk/p/7497723.html 運行程式時拋出異常： 基礎提供程式在 Open 上失敗，詳細信息：該帳戶當前被鎖定，所以用戶sa登錄失敗。系統管理員無法將該帳戶解鎖。 1.考慮連接字元串是否正常 登錄資料庫，發現登錄報同樣的錯誤 ...
  • iOS開發 － OC － PCH文件使用
    一、 PCH文件的作用 Xcode中，PCH文件在程式編譯的時候會自動包含進去。也就是說PCH中的內容是全局的，可以使用在程式的任何地方，通過這個特性，我們可以概括到PCH的作用有以下幾個方面： （1）將經常使用的巨集定義在該文件，可以避免多次定義的麻煩 （2）包含多次使用的.h文件 （3）其他需要全 ...
  • iOS 多線程：『RunLoop』詳盡總結
    1. RunLoop 簡介 1.1 什麼是 RunLoop？ 可以理解為字面意思：Run 表示運行，Loop 表示迴圈。結合在一起就是運行的迴圈的意思。哈哈，我更願意翻譯為『跑圈』。直觀理解就像是不停的跑圈。 RunLoop 實際上是一個對象，這個對象在迴圈中用來處理程式運行過程中出現的各種事件（比 ...
  • 抓出卡頓元凶，從分析掉幀開始
    這次我們依舊來談談有關性能優化的話題，這次我們會用到Google給我們提供的分析工具——Systrace。如果你還不瞭解這個工具，最好先瞭解一下。Google 官方文檔： https://developer.android.com/studio/command line/systrace 我們還會用 ...
  • JS閉包作用域解析
    什麼是閉包？ 簡單理解，當在一個函數的外部訪問函數內部定義的變數的時候就會形成一個閉包，由這個理解可以知道，當一個函數執行完成的時候，一般情況下，其作用域會被銷毀，其內部定義的變數也會變得不可訪問，所以閉包打破了這個現象。閉包造成一個函數執行完成之後，其創建的作用域不會被銷毀，因為它被函數外部的對象 ...
  • vue-cli3.0 升級記錄
    年三十時 vue2.6 發佈，向 3.0 看齊，說明 3.0 不遠了。作為開發者也應該為vue3.0 做點準備。首先是把 vue-cli 升級到 3.x ，在這記錄下 vue-cli2.x 升級 vue-cli3.x 中遇見（將來）遇見的問題。 1、安裝 vue-cli3.x 如果希望還保留 vue ...
  • Canvas
    // canvas畫圖 // 顏色漸變 var grd = draw.createLinearGradient(0,0,175,50); grd.addColorStop(0, '#f00'); grd.addColorStop(0.5, '#0f0'); grd.addColorStop(1.0, ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類