使用CSS3和JavaScript实现径向动画菜单

时间：2023-03-13 23:01:40 科技观察

今天，让我们来看看：如何使用CSS3和JavaScript轻松实现一个简单的径向动画菜单。看下面的demo，点击按钮，会弹出圆形菜单。上面的codepen示例展示了代码，所以让我们介绍一些细节。HTML让我们看看HTML。我们使用HTML5nav元素，它包含一些链接元素和一个激活径向菜单的按钮。

我用的字体AwesomeIcons，同时在a标签中添加必要的类以将漂亮的图标附加到径向菜单中的菜单项。CSS接下来，让我们看一些CSS。首先，我们定义径向菜单根容器的宽度和高度（这里是带有圆形菜单类的导航元素）。我们还将position属性定义为relative以便于对包含的菜单项进行相对定位。.circular-menu{width:250px;高度：250px；保证金：50pxauto0；职位：相对；}默认情况下，菜单项是隐藏的。我们要做出漂亮的“淡入淡出+缩放”效果，所以在初始化菜单项的时候，设置透明度为0，transform属性的缩放值设置为0。.circle{width:250px;高度：250px；不透明度：0；-webkit-转换：规模（0）；-moz-transform:scale(0);-变换：比例（0）；-webkit-过渡：all0。4出海；-moz-transition:all0.4sease-out;过渡：all0.4sease-out；如您所见：我们使用transition属性来定义动画。为了使菜单项放大和淡入，我们要在类之间切换。所以我们为径向菜单定义了一个开放类。.open.circle{不透明度：1;-webkit-transform:scale(1);-moz-transform:scale(1);-变换：比例（1）；一旦open类和circle类出现在同一个元素中，那么该元素将根据动画长度和过渡属性的类型应用新的样式属性。当然，嵌入到circle类中的a元素也是需要样式的。除了一些常规尺寸的样式外，设置position为absolute也很重要，它可以让JavaScript对径向菜单中的菜单项进行绝对定位。.circlea{文字装饰：无；白颜色;显示：块；高度：40px；宽度：40px；行高：40px；左边距：-20px；边距顶部：-20px；-居中对齐;}.circlea:hover{颜色：#eef;}同时，我们需要对菜单的切换按钮进行定位和设计。.menu-button{位置：绝对；顶部：计算（50%-30px）；左：计算（50%-30px）；文字装饰：无；文本对齐：居中；颜色：#444；50%；显示：块；高度：40px；宽度：40px；行高：40px；填充：10px；背景：#dde;}.menu-button:hover{背景色:#eef;现在让我们将Step向下移动到第一部分，这使我们的菜单成为真正的径向菜单。JavaScript首先我们实现点击菜单切换按钮显示和隐藏菜单项的功能。document.querySelector('.menu-button').onclick=function(e){e.preventDefault();document.querySelector('.circle').classList.toggle('open');}选择菜单按钮类元素来监听点击事件。单击它后，它将选择具有circle类的元素并向其添加open类。现在，最大的任务是：确定菜单项的位置。varitems=document.querySelectorAll('.circlea');for(vari=0,l=items.length;i

上一篇：变“沙”成“金”的芯片制造工艺揭秘

下一篇：一个源自高中生的算法“y-cruncher”让圆周率的准确率破世界纪录

使用CSS3和JavaScript实现径向动画菜单相关文章