在慕课网发现了一个有意思的课程,叫 数学知识在CSS动画中的应用 。用到的数学知识是如何计算圆上每个点的坐标。统一名称,中间的菜单叫触发菜单,四周发散的菜单叫子菜单,



效果预览

慕课网通过jquery计算子菜单的坐标,控制相应的css属性,来实现这一功能。

有关计算,又有关css属性,那么css预处理器便是一个不错的选择。

less与scss

scss基于ruby,使用在服务器端。less基于node,可以直接在浏览器端使用,但会消耗更多的性能。所以两者一般都会在前期使用工具编译为css。scss不支持三角函数,less却能够很好的支持三角函数,less便成了一个不错的选择。

先把大致布局放在这里。

<div class="container">
<a class="btn"></a>
<input type="checkbox" class="toggle">
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
<div class="circle">5</div>
<div class="circle">6</div>
<div class="circle">7</div>
<div class="circle">8</div>
<div class="circle">9</div>
<div class="circle">10</div>
<div class="circle">11</div>
<div class="circle">12</div>
</div>

绝对定位居中

把径向菜单置于窗口中间,可以使用绝对定位,然后使它居中。写一个MIXIN

.center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

画一个圆

以下mixin表示一个以@radius为半径,@color为背景的一个圆。圆是一个圆角半径为50%的正方形。box-sizing: border-box使得可以给圆添加边框长度而不至于使圆变形。

.radius(@radius, @color: transparent) {
width: @radius * 2;
height: @radius * 2;
border-radius: 50%;
background-color: @color;
box-sizing: border-box;
}

设置径向菜单大小及初始位置

.container表示子菜单所在的圆,.circle为子菜单,初始化时无大小,text-alignline-height控制字体居中。

.container {
.center();
.radius(@distance);
border: 1px dotted #aaa;
} .circle {
.radius(0);
.center();
font-size: 0;
opacity: 0;
transition: all 800ms ease;
line-height: @circle-radius * 2;
text-align: center;
color: #ffc;
cursor: pointer;
}

触发菜单

点击触发菜单会使子菜单发散。checkbox通过:checked伪类选择器可以模拟点击触发的效果,使它的透明度改为0,再增加一个装饰的.btn设置背景,使它看起来像一个按钮。

.btn,
.toggle {
.radius(@toggle-radius, rgb(0, 51, 51));
.center();
} .toggle {
opacity: 0;
cursor: pointer;
&:checked {
.generate-circle();
}
}

子菜单的发散

点击触发菜单会使子菜单发散开来。此时子菜单的选择器应该使用~选择器。计算其位置设置translate的平移属性,并设置动画。

less使用循环生成每个子菜单的位置,count是子菜单的数量。不得不说,还是scss的for循环好用太多。

注意其下用的是nth-of-type

.generate-circle(@i: 1) when (@i < @count + 1) {
& ~ .circle:nth-of-type(@{i}) {
.radius(@circle-radius, @color);
@top: round(sin(pi() * 2 * (@i - 1)/ @count) * @distance) - @circle-radius;
@left: round(cos(pi() * 2 * (@i - 1)/ @count) * @distance) - @circle-radius;
transform: translate(@top, @left);
opacity: 1;
font-size: 1em;
transition: all 800ms ease;
&:hover {
background-color: #033;
}
}
.generate-circle(@i + 1);
}

源码

使用less做的径向菜单

效果预览

参考

less语言特性

再谈 CSS 预处理器

数学知识在CSS动画中的应用

less做个径向菜单的更多相关文章

  1. 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  2. 如何用Mockplus快速做一个手风琴菜单?

    手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器.即使是功能强大的Axure,想实现该效果也比较麻烦.但如果你对Mockplus有所了解,你一定知道,利用Mockplus的 ...

  3. JS之document例题讲解1(两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结)

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  4. 用jquery ajax做的select菜单,选中的效果

    //用server端语言赋值给js变量     var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>'     $(fun ...

  5. JQ 查找 两个同辈元素之间 的同辈元素 nextUntil() 用于做一个多级菜单

    可以应用的地方,参考了淘宝的API菜单列表 我自己的应用

  6. java--css+js做的树形菜单(完整版)

    jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

  7. 13 用Css做下拉菜单

    <style type="text/css"> * {     margin: 0px;     padding: 0px;     font-family: &quo ...

  8. Flutter Demo: 径向菜单动画

    video import 'dart:math'; import 'package:flutter/material.dart'; import 'package:vector_math/vector ...

  9. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

随机推荐

  1. 网上B2C书城,1.0javaWEB版!!好几天没更新了,都忙着做那个网站了~

    惯例帮师傅打个广告www.java1234.com,从基础学习java WEB! 从最初的构思,到一点点功能的实现,真是不容易啊,由于自己没有项目经验,完全依靠自己的感觉,以及自己琢磨出来的思路来写, ...

  2. Mysql Cluster 集群 windows版本

    VM1:192.168.220.102 管理节点(MGM) VM2:192.168.220.103 数据节点(NDBD1),SQL节点(SQL1) VM3:192.168.220.104 数据节点(N ...

  3. error C4996 The POSIX name for this item is deprecated. Instead, use the ISO C and C++ conformant name

    error C4996: 'strupr': The POSIX name for this item is deprecated. Instead, use the ISO C and C++ co ...

  4. cocostudio中button

    在编辑器中使用Button控件调用setBright(false)函数控件会不显示 开始以为是代码哪调用了setVisible(false)就在底层函数void Node::setVisible(bo ...

  5. [转]easyui常用控件及样式收藏

    CSS类定义: div easyui-window                               window窗口样式 属性如下: 1)       modal:是否生成模态窗口.tru ...

  6. windows下载安装requests

    1.下载地址:https://github.com/kennethreitz/requests 2.解压缩后,cd requests 3.安装 python setup.py install

  7. github/python/ show me the code 25题(一)

    先上网址 https://github.com/Show-Me-the-Code/show-me-the-code 初学python拿来练手,记住一些常用的库和函数 第 0000 题:将你的 QQ 头 ...

  8. 【转】IOS开发小技巧

    1,Search Bar 怎样去掉背景的颜色(storyboard里只能设置background颜色,可是发现clear Color无法使用). 其实在代码里还是可以设置的,那就是删除背景view [ ...

  9. 与ARM7相比Cortex-M3优势明显

  10. 微软 Office 2010 SP2 正式版下载大全(含简中)

    7月24日消息,微软正式为 Office 2010 和 SharePoint 2010 系列产品发布 SP 2服务包,带来重要更新和修复.除了提供产品补丁,SP2服务包还将提升产品的稳定性.性能以及安 ...