捕鱼游戏官网>捕鱼游戏网站>红宝石娱乐网站游戏·使用css transforms来创建一个漂亮的圆形菜单

红宝石娱乐网站游戏·使用css transforms来创建一个漂亮的圆形菜单

2020-01-09 11:36:02 来源:阅读:544

红宝石娱乐网站游戏·使用css transforms来创建一个漂亮的圆形菜单

红宝石娱乐网站游戏,在这个教程里我们将向大家展示如何使用css transforms来创建一个漂亮的圆形菜单。我们将一步步的带你创建样式表,然后解释一些使用到的数学计算公式和简单逻辑,以便使你有一个很清晰的思路。

如何使用css transforms来创建一个漂亮的圆形菜单

如何使用css transforms来创建一个漂亮的圆形菜单

正如上面所说的,我们将使用到一些基本的数学计算公式和css transforms来创建样式。但是你不用担心,这些公式都非常简单,我将一步步的给大家解释。

我们要创建的是一个菜单,让我们先从正常的菜单结构开始。我们需要一个包含无序列表的div,一个触发打开关闭动作的按钮。在第一种效果中,当菜单打开时我们还需要一个遮罩层来遮住页面!

这个例子中的图标我们将使用font awesome。

最好的理解这些公式的方式是使用画图的方式来。所以下面会用图解的方式来解释每一步的css样式是如何来的。

先来看看每个扇形的角度是多少,下面是一张示意图:

如何使用css transforms来创建一个漂亮的圆形菜单

所以扇形的分布如上图所示,我们的demo中有6个li,那么每个li的角度为:

180deg / 6 = 30deg

如果你想做一个完整的圆形,那么角度值为:

360deg / 6 = 60deg

以此类推,你可以计算出你想要的扇形角度。我们将在css中使用这些角度。

要创建一个刚好等于我们所需要的角度的扇形,可以使用skew()来将它们倾斜。倾斜的值为:

90deg – x deg

这里的x为我们需要的角度。

这时候,列表中的所有li都将因倾斜而产生扭曲,因此我们需要所有的a元素设置为不倾斜,

我们将使用modernizr来检测页面是否支持css transforms,并且当检测到不支持css transforms的浏览器时给出一个简单的回调函数。

现在开始写菜单样式。菜单应该是固定在页面底部的,在页面初始化时是最小化的,当点击了按钮后才开始放大并展开。

给菜单触发按钮添加一些样式

当菜单打开时,会有一个遮罩遮罩页面。

现在按照先前的数学公式给菜单项和a元素添加样式。

当浏览器不支持css transforms时,我们给出一个简单的回调。

我们希望菜单是响应式的,以适应所有的屏幕。

在这个demo中我们不想使用任何的javascript框架。我们用classie.js来添加和删除class,如果浏览器不支持addeventlistener和removeeventlistener,可以使用eventlistener polyfill来解决。

我们将给按钮添加点击事件,点击按钮将使菜单打开或关闭。

当菜单打开时,点击菜单外的任何地方,菜单也将关闭。

如何使用css transforms来创建一个漂亮的圆形菜单

到这里,本教程就结束了,希望它对你有所帮助。

作者简介:资深程序员,蚂蚁h5社区创始人,欢迎关注我!下载源码,请点击了解更多。

上一篇:从零星的骨片中寻获陌生的人类远祖
下一篇:这种你我小时候痴玩的游戏,对现在的孩子也有莫大吸引力!
关键词: