个人很喜欢谷歌的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:;

    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:;

        width:;

        // background-color: red;

        position: absolute;

        top: @fabTriggerRadius;

        left: @fabTriggerRadius;

        >.action {

            height:;

            width:;

            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

fab 菜单实现之前传-钟表表盘的更多相关文章

  1. fab 菜单实现—圆形、半圆、扇形、直线、射线

    前段时间记录一下fab 菜单实现之前传-钟表表盘,今天终于弄正文了. 本文基于上篇文章的布局方式和位置计算,并参考35 Cool Floating Action Button Animations(h ...

  2. 解决android4.0系统中菜单(Menu)添加Icon无效问题

    本文转载自: http://blog.csdn.net/stevenhu_223/article/details/9705173 在Android4.0系统中,创建菜单Menu,通过setIcon方法 ...

  3. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  4. 11 OptionsMenu 菜单

    OptionsMenu 选项菜单(系统菜单 ) OptionsMenu:系统级别菜单 菜单的使用步骤: 1. res里的menu里添加布局 在布局里写菜单项 2. 在逻辑代码中使用OnCreateOp ...

  5. 递归处理vue菜单数据

    结构不多说,bean的封装很简单,直接上核心代码吧,自己根据需要把不要的属性自己过滤掉: public List<MenuBo> getMenuByUserId(Long user_id, ...

  6. 32.QT-制作最强电压电阻表盘,可以自定义阴影效果,渐变颜色,图标,文字标签等-附带demo程序

    由于上位机需要绘制电压电阻表盘,如下图所示: 后来,在网上找阿找,还是没找到满意的,索性自己来画控件算了,由于第一次画控件,所以花了我2天时间,才画好 效果图如下: 上图的所有颜色(包括滑动的渐变/单 ...

  7. Vue2 实现树形菜单（多级菜单）功能模块

    结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...

  8. Android开发之选项菜单（optinosMenu）

    android一共有三种形式的菜单:                  1.选项菜单(optinosMenu)                  2.上下文菜单(ContextMenu)       ...

  9. DWZ SSH2 菜单树--使用Struts2 标签（iterator/set/if 组合使用）

    最近在研究DWZ框架,然后要写一个菜单树,后台我使用了SSH2,然后想把菜单通过后台传过来的对象展示出来. 但是,发现应用样式的时候,如果子菜单在子循环中为空的话,会多出一对空标签“<ul> ...

随机推荐

  1. ASP.NET Core 实战：构建带有版本控制的 API 接口

    一.前言 在上一篇的文章中,主要是搭建了我们的开发环境,同时创建了我们的项目模板框架.在整个前后端分离的项目中,后端的 API 接口至关重要,它是前端与后端之间进行沟通的媒介,如何构建一个 “好用” ...

  2. java~springboot~目录索引

    回到占占推荐博客索引 最近写了不过关于java,spring,微服务的相关文章,今天把它整理一下,方便大家学习与参考. java~springboot~目录索引 Java~关于开发工具和包包 Java ...

  3. ConcurrentDictionary并发字典知多少?

    背景 在上一篇文章你真的了解字典吗?一文中我介绍了Hash Function和字典的工作的基本原理. 有网友在文章底部评论,说我的Remove和Add方法没有考虑线程安全问题. https://doc ...

  4. 结合JDK源码看设计模式——迭代器模式

    前言: Iterator翻译过来就是迭代器的意思.在前面的工厂模式中就介绍过了iterator,不过当时介绍的是方法,现在从Iterator接口的设计来看,似乎又是一种设计模式,下面我们就来讲讲迭代器 ...

  5. openlayers4 入门开发系列之聚合图篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  6. frp内网 穿透映射使内网svn可外网访问

    起因 公司svn目前部署在内网服务器上,现在想在家中也可以使用,因此需要外网访问内网的工具 经过 使用过几个产品: utools,一个小巧的windows下的工具,内网映射只是它的一个小功能,支持tc ...

  7. 【jframe】Java架构师之路 - 第01篇：Get Started

    jframe是什么? jframe是一个基于MIT协议开源的java web应用程序框架,汇聚了我们团队之于java web应用程序的核心架构思想以及大量最佳实践,并且持续在实际项目中不断完善优化. ...

  8. 经典排序算法 — C# 版（上）

    提起排序,与我们的息息相关,平时开发的代码少不了排序. 经典的排序算法又非常多,我们怎么评价一个排序算法的好坏呢? 其实可以这样想,要细致的比较排序算法好坏,那我们就从多方面尽可能详细的对比 一.效率 ...

  9. 升级node版本

    一.升级方法: 1.产看node版本,没安装的请先安装: $ node -v 2.清楚node缓存: $ sudo npm cache clean -f 3.安装node版本管理工具'n'; $ su ...

  10. PHP内核之旅-6.垃圾回收机制

    回收PHP 内核之旅系列 PHP内核之旅-1.生命周期 PHP内核之旅-2.SAPI中的Cli PHP内核之旅-3.变量 PHP内核之旅-4.字符串 PHP内核之旅-5.强大的数组 PHP内核之旅-6 ...