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

最新推荐文章于 2024-08-09 07:32:16 发布

web老猴子

最新推荐文章于 2024-08-09 07:32:16 发布

阅读量3.7k

点赞数 1

文章标签： css vue.js css3

本文链接：https://blog.csdn.net/web220507/article/details/127425451

版权

本文通过Vue的动态样式和计算属性，介绍如何实现一个点击展开的圆环菜单。详细解析了整体结构、按钮hover样式、圆环展示以及菜单元素的样式计算与动画配置，最终形成一个具有视觉效果的交互组件。

摘要由CSDN通过智能技术生成

前言

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

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

先上最终效果和代码：

实现

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

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

1. 整体结构与基础按钮

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

<template><div class="circle-menu-button"><div :class="{ menu: true, active: isActive }"><label class="menu-dots" for="menu" @click="isActive = !isActive"><span class="menu-dot"></span><span class="menu-dot"></span><span class="menu-dot"></span></label><ul class="menu-items"></ul></div></div>
</template>

<script> export default {name: "CircleMenuButton",data() {return {isActive: false};}
}; </script>

<style scoped lang="s