个人很喜欢谷歌的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中实现单体程序的事件发布/订阅

    标题:ASP.NET Core中实现单体程序的事件发布/订阅 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/10468058.html 项目源代码: ...

  2. Java基础练习4(内存管理)

    请根据如下程序代码,画出对应的内存管理图(不需要画方法区),并写出输出结果. 1. public class Cell{ int row; int col; public Cell(int row,i ...

  3. java中如何从一行数据中读取数据

    目录 @(如何从一行数据中切割数据) 例如我要从一行学生信息中分割出学号.姓名.年龄.学历等等 ==主要使用split方法,split方法在API中定义如下:== public String[] sp ...

  4. 前端笔记之HTML

    前端三层:内容层(结构层)HTML.样式层(表现层)CSS.行为层JavaScript 层 语言 含义 结构层 HTML 由 HTML 或 XHTML之类的标记语言负责创建.标签,也就是那些出现在尖括 ...

  5. openlayers4 入门开发系列之地图空间查询篇（附源码下载）

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

  6. ArcGIS API for JavaScript 入门教程[5] 再讲数据——Map类之底图与高程

    [回顾]前4篇交代了JsAPI的背景.资源如何获取,简介了数据与视图分离的概念与实现,剖析了页面的大骨架. 这篇开始,讲Map类. 转载注明出处,博客园/CSDN/B站/知乎:秋意正寒 目录:http ...

  7. Git默认用户名和密码设置

    使用git的时候每次都需要输入密码,操作过程十分繁琐,非常不人性化,增加开发工作时间,也特别烦恼. 今天我们就来说说这个问题: 首先,如果我们git clone的下载代码的时候是连接的https:// ...

  8. SQL2005打SP4补丁报错：无法安装Windows Installer MSP文件解决方案

    错误如图: 解决方案分享如下: 第一步:卸载下图红框圈住的玩艺. 第二步:把SP4补丁文件解压,找到下图红框圈住的玩艺: 第三步:重新运行SP4补丁安装文件,安装正常.

  9. Install Windows 2016 on VirtualBox

    Download ISO file for Windows 2016 (180 days free).  https://www.microsoft.com/en-us/evalcenter/eval ...

  10. 操作系统：diskpart常用指令（使用diskpart实现分区管理）

    配合磁盘管理一起食用,效果最佳.(我的电脑右键 -> 管理 -> 磁盘管理) status:列出主要命令 list:列出list下的命令 select disk 0:选择第一块磁盘 lis ...