个人很喜欢谷歌的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. 开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程

    目录 基本原理 方法1 - 本机Windows下建站 (力荐) 下载安装node.js 用管理员权限打开命令行,安装hexo-cli和hexo 下载安装git 初始化hexo 使用hexo gener ...

  2. ConcurrentDictionary并发字典知多少?

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

  3. vue安装jquery和配置（不需要在页面引入直接可以使用）

    首先在命令行工具上输入 npm install jquery --save-dev 安装完成之后在build文件夹下的webpack.base.conf.js进行配置,在顶部添加:const webp ...

  4. NFS挂载异常 mount.nfs: Input/output error

    [root@localhost ~]# vi /etc/exports #增加/nfs 192.168.10.132(rw,no_root_squash,no_all_squash,async) [r ...

  5. Mongo之架构部署(Replica Sets+Sharding)

    一.环境 要构建一个 MongoDB Sharding Cluster,需要三种角色: •Shard Server: mongod 实例,用于存储实际的数据块. •Config Server: mon ...

  6. winfrom 改变图片透明度 Alpha

    效果图: 核心代码: /// <summary> /// 方法一 设置图像透明度 /// </summary> /// <param name="srcImag ...

  7. nginx部署静态网站

    实验环境 服务器:centos7.5 1核1G Nginx版本:nginx-1.14.2 主题 部署静态文件 根据不同url请求路径,定向到不同的系统文件夹 部署静态文件 假设nginx安装在“/us ...

  8. 爬虫框架之Scrapy（三 CrawlSpider）

    如何爬取一个网站的全站数据? 可以使用Scrapy中基于Spider的递归方式进行爬取(Request模块回调parse方法) 还有一种更高效的方法,就是基于CrawlSpider的自动爬取实现 简介 ...

  9. Json,Gson,Ajax基础知识

    //json 是一种轻量级的文本格式,解析简单,他也是一键值来存,数据与数据的分割是以,来分割 //{} 看到大括号就是一个对象,[]代表集合 ,基本上所有数据的交互都是以json格式来进行传递的 / ...

  10. pandas操作

    python中使用了pandas的一些操作,特此记录下来: 生成DataFrame import pandas as pd data = pd.DataFrame({ 'v_id': ["v ...