CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单

前言

在前面的两节 【CSS 进阶向】 中，我们通过纯粹的 CSS 结合 HTML 元素实现了两种不同的“流光边框”效果的按钮。两者都是通过元素（或者伪元素）配合 CSS 动画属性 animation 与自定义动画帧 @keyframes 来实现的。

这次我们通过 Vue 的动态样式和计算属性，来实现一个点击展开的圆环菜单，并且实现菜单图标的顺序显示。

先上最终效果和代码：

实现

在实现过程中，我们按照以下步骤：

1.整体结构 和 控制菜单展开/首起的按钮
2.控制按钮的 hover 状态
3.展开后的圆环
4.每个菜单的样式计算与动画配置

1. 整体结构与基础按钮

整个菜单内部包含两个部分：控制按钮 和 菜单列表，分别用一个 label 和 ul 填充。label 内部使用三个 span 标签实现圆点；并用动态样式绑定一个展开状态的 class 类名。