fab 菜單實(shí)現(xiàn)之前傳-鐘表表盤

番茄西紅柿發(fā)布于2019-04-23 11:48 / 3368人閱讀

摘要：個(gè)人很喜歡谷歌的很喜歡但是沒有動(dòng)手弄過，今天想動(dòng)手操作一下菜單，網(wǎng)上有很多種圓形扇形射線直線等。開始的時(shí)候，以中心圓圓心為圓心，已某一值為半徑暫記作畫圓，之后個(gè)數(shù)字的的圓心都在前面的圓上。

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

　　基于這種需求，開始著手準(zhǔn)備，此時(shí)遇到一個(gè)問題，就是計(jì)算彈出按鈕的位置，開始的時(shí)候也沒有多想就開始一個(gè)一個(gè)的計(jì)算位置了，在計(jì)算的過程中發(fā)現(xiàn)有的坐標(biāo)是一樣的（這里采用彈出四個(gè)菜單），在計(jì)算對(duì)應(yīng)的圓形、扇形、半圓形菜單的位置時(shí)感覺還好是有一定規(guī)律的，畫了幾個(gè)圖之后發(fā)現(xiàn)這不就是鐘表上12個(gè)數(shù)字的位置嗎？？？哎！！！所以才有了這一篇前傳，先弄一個(gè)表盤。

　　在用css畫一個(gè)表盤的時(shí)候，也遇到了一些問題，因?yàn)橹行脑c(diǎn)和12個(gè)數(shù)字都是用的div，他們都是有大小的（這里記作：中心圓半徑為28px，即div的寬高都是28px;數(shù)字圓的半徑為20px，即div的寬高都是20px）。開始的時(shí)候，以中心圓圓心為圓心，已某一值為半徑（暫記作100px）畫圓，之后12個(gè)數(shù)字的div的圓心都在前面的圓上。以這種方式，來計(jì)算相對(duì)位置，即12個(gè)數(shù)字圓的left和top，很麻煩，因?yàn)榇嬖谥鴺?biāo)平移……后來一想為什么不能將兩個(gè)坐標(biāo)系的中心重合，之后再去計(jì)算位置簡單多了（不存在坐標(biāo)平移）。實(shí)現(xiàn)方式就是12個(gè)數(shù)字圓放在一個(gè)div中，這個(gè)div的高度和寬度都是0，位置放在中心圓的圓心位置，單個(gè)數(shù)字圓的實(shí)現(xiàn)方式類似……

　　方式定了之后就是具體的位置計(jì)算了，這里用的是三角函數(shù)，因?yàn)檫@里沒有使用js，要想在css中實(shí)現(xiàn)三角函數(shù)就只能less或者其他了（就是用過他，他的沒有研究，據(jù)說scss沒有內(nèi)置，還得自己寫……），上一張圖，說明一下12個(gè)數(shù)字圓對(duì)應(yīng)在坐標(biāo)系中的位置，該用什么度數(shù)計(jì)算三角函數(shù)值：

　　三點(diǎn)鐘方向算是0度，四點(diǎn)鐘為30度，順時(shí)針旋轉(zhuǎn)，依此類推……畫這個(gè)圖太費(fèi)勁了，關(guān)鍵是不知道哪里有這樣的工具，這里是在一個(gè)在線網(wǎng)站上畫的，畫完之后是可以分享的，分享一下鏈接地址：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 菜單實(shí)現(xiàn)之前傳-鐘表表盤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">1div>
                div>
                <div class="action">
                    <div class="action-content">2div>
                div>
                <div class="action">
                    <div class="action-content">3div>
                div>
                <div class="action">
                    <div class="action-content">4div>
                div>
                <div class="action">
                    <div class="action-content">5div>
                div>
                <div class="action">
                    <div class="action-content">6div>
                div>
                <div class="action">
                    <div class="action-content">7div>
                div>
                <div class="action">
                    <div class="action-content">8div>
                div>
                <div class="action">
                    <div class="action-content">9div>
                div>
                <div class="action">
                    <div class="action-content">10div>
                div>
                <div class="action">
                    <div class="action-content">11div>
                div>
                <div class="action">
                    <div class="action-content">12div>
                div>
            div>
        div>
    div>

body>

html>

html代碼

// 1、 純CSS圖標(biāo) ********開始********

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

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

// 加號(hào)圖標(biāo)
.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;
}

// 心型圖標(biāo)
.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圖標(biāo) ********結(jié)束********

@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代碼

　　演示地址：鐘表表盤

　　至此，這篇文章就結(jié)束了。這里在記錄幾個(gè)網(wǎng)址：

　　1、35 Cool Floating Action Button Animations

　　2、Less 在線編譯器

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

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

　　以下為純CSS圖標(biāo)：

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

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

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

云服務(wù)器 GPU云服務(wù)器 html實(shí)現(xiàn)儀表盤下拉菜單傳值給php 底部菜單實(shí)現(xiàn) 用于實(shí)現(xiàn)傳參

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/1196.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 730·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3974·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3801·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3865·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3796·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3894·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3571·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6154·2021-11-29 11:00

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

fab 菜單實(shí)現(xiàn)之前傳-鐘表表盤

相關(guān)文章

fab 菜單實(shí)現(xiàn)—圓形、半圓、扇形、直線、射線

用CSS3實(shí)現(xiàn)鐘表效果

用CSS3實(shí)現(xiàn)鐘表效果

用CSS3實(shí)現(xiàn)鐘表效果

微信小程序Taro開發(fā)(3)：canvas制作鐘表

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動(dòng)