html实现蜂窝菜单
效果图



CSS样式
@keyframes _fade-in_mkmxd_1 {0% {filter: blur(20px);opacity: 0}to {filter: none;opacity: 1}
}
@keyframes _drop-in_mkmxd_1 {0% {transform: var(--transform) translateY(-100px) translateZ(400px)}to {transform: var(--transform)}
}
._examples_mkmxd_3 {margin-top:200px;position: relative;width:1000px;height: 640px;transition: transform .15s ease-out;filter: drop-shadow(0 4px 18px rgba(0,0,0,1));--grid-width: 140px;left: 50%;transform: translate(-50%, 0px);
}
._examples_mkmxd_3 div {position: relative;transition: filter .25s ease-out;animation: _fade-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;
}
._examples_mkmxd_3 div:hover {filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));z-index: 3;
}
._examples_mkmxd_3 a {position: absolute;--transform: perspective(75em) rotateX(0deg) rotateZ(-0deg) translate(calc(var(--x) * 100%), calc(var(--y) * 86.67%)) scale(1.145);transform: var(--transform);animation: _drop-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;transition: transform .25s ease-out;/*clip-path: polygon(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%);*//*clip-path: polygon(25% 93.3%,75% 93.3%,93.3% 50%,75% 6.7%,25% 6.7%,6.7% 50%);*/clip-path: polygon(25% 87%,75% 87%,98.3% 50%,75% 13%,25% 13%,1.7% 50%);
}
._examples_mkmxd_3 a:hover{transform: var(--transform) translateZ(10px) scale(1.1);
}
._examples_mkmxd_3 img {aspect-ratio: 1;object-fit: cover;height: 64px;width: 64px;transform: translate(-50%, 40px);left: 50%;position: absolute;/*filter: drop-shadow(2px 2px 0px #00BFFF);*/
}
img {max-width: 100%;height: auto;display: block;
}
*{box-sizing: border-box;
}
.menu-box{display: block;width:200px;height:200px;/*background:rgba(84, 109, 231,.6);*/background: mediumpurple;position: relative;
}
.menu-text{color: #fff;position: absolute !important;top: 120px;left: 50%;font-weight: bold;transform: translate(-50%, 0px);/*filter: drop-shadow(2px 2px 0px #00BFFF);*/font-size: 16px;text-align: center;
}
.back-img{width: 64px !important;position: absolute;left: 50%;transform: translate(-50%, 20px);/*filter: drop-shadow(2px 2px 0px #00BFFF);*/
}
a:hover+.menu-box .menu-text{color: #00BFFF;filter: drop-shadow(2px 2px 0px #fff);
}
html
<div class="_examples_mkmxd_3" ><div v-for="(item,index) in tempData" :key="index" :style="{'--delay': item.showTime}"><a href="#" :title="item.name" @mouseenter="menuEnter(item)" @mouseleave="menuLeave(item)" @click="menuClick(item,tempData)" :style="{'--x': item.x, '--y': item.y}"><span class="menu-box" :style="{'background':item.color}"><img v-if="item.name!=='上一层'" :src="item.imgPath?item.imgPath:'../img/navigation/火车站.png'" ><img v-if="item.imgPath&&item.name==='上一层'" :src="item.imgPath" class="back-img"><span class="menu-text">{{item.name}}</span></span></a></div>
</div>
vue代码
new Vue({el:'#app',data(){return {menuData:[{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[{x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]},]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]},]},{x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'../img/navigation/火车站.png',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]},{x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]},{x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]},{x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]},],tempData:[], colors:['#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD','#1C86EE', '#00FF7F', '#FF8C00', '#EE1289', '#EE00EE','#1E90FF', '#00FF00', '#FFA500', '#FF1493', '#FF00FF',]}},watch:{menuData(){this.initCoor()}},mounted(){let _this = thisthis.getUser()// this.getMenuData()this.tempData = this.menuDatathis.initCoor()this.timer = setInterval(function(){_this.localDate = _this.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')},1000)},destroyed(){clearInterval(this.timer)},methods:{menuEnter(item){if(item.name==='上一层')returnthis.msgData = itemthis.msgShow = true},menuLeave(item){this.msgShow = false}, showTime(item){if(item.name==='上一层')return '0s'return Math.random()+'s'},menuClick(item,parant){let arr =[]if(item.name==='上一层'){this.changeMenu(item.children)}else if(item.children.length>0){arr.push({x:0,y:0,path:'',name:'上一层',imgPath:'../img/navigation/icon-返回上一级.png',children:parant})item.children.forEach(t=>{arr.push(t)})this.changeMenu(arr)}else{window.location.href = item.path}},changeMenu(data){let _this = thisthis.tempData = []setTimeout(function(){_this.tempData = data_this.initCoor()},10)},initCoor(){this.tempData.forEach((t,index)=>{t.color = this.colors[index]t.showTime = this.showTime(t)if(!t.children){t.children = []} if(index<5){t.y=0t.x=index*0.86if(index%2!==0){t.y += 0.5// t.x = (index-1)+0.8}}else if(index>4&&index<10){t.y=1t.x=(index-5)*0.86if(index%2===0){t.y += 0.5// t.x = (index-1)+0.8}}else if(index>9&&index<15){t.y=2t.x=(index-10)*0.86if(index%2!==0){t.y += 0.5// t.x = (index-1)+0.8}}})}, }
})相关文章:
html实现蜂窝菜单
效果图 CSS样式 keyframes _fade-in_mkmxd_1 {0% {filter: blur(20px);opacity: 0}to {filter: none;opacity: 1} } keyframes _drop-in_mkmxd_1 {0% {transform: var(--transform) translateY(-100px) translateZ(400px)}to {transform: var(--transform)} } ._examples_mkmx…...
云原生训练营课程大纲
第一部分:Go 语****言基础 模块一:Go 语言特性 教学目标: 理解 Go 语言基本语法 理解 Go 语言常用数据类型 理解 Go 语言常用小技巧 深入理解 Go 语言的多线程编程 针对的用户痛点: 云原生从业者因为未熟练掌握 Go 语言&#…...
【Ajax】笔记-同源策略
同源策略(Same-Origin Policy),是浏览器的一种安全策略 同源(即url相同):协议、域名、端口号 必须完全相同。(请求是来自同一个服务) 跨域:违背了同源策略,即跨域。 ajax请求是遵循…...
Java使用FFmpeg实现mp4转m3u8
Java使用FFmpeg实现mp4转m3u8 前言FFmpegM3U8 一、需求及思路分析二、安装FFmpeg1.windows下安装FFmpeg2.linux下安装FFmpegUbuntuCentOS 三、代码实现1.引入依赖2.修改配置文件3.工具类4.Controlle调用5.Url转换MultipartFile的工具类 四、播放测试1.html2.nginx配置3.效果展示…...
【JavaEE初阶】Servlet (三)MessageWall
在我们之前博客中写到的留言墙页面,有很严重的问题:(留言墙博客) 如果刷新页面/关闭页面重开,之前输入的消息就不见了.如果一个机器上输入了数据,第二个机器上是看不到的. 针对以上问题,我们的解决思如如下: 让服务器来存储用户提交的数据,由服务器保存. 当有新的浏览器打开页…...
D. Make It Round
在Berlandia发生了通货膨胀,所以商店需要改变商品的价格。 商品n的当前价格已经给出。允许将该商品的价格提高k倍,1≤k≤m,k为整数。输出商品的最圆的可能的新价格。也就是在最后有最大数量的零的那个。 例如,数字481000比数字1…...
Python网站页面开发HTML总结
Python网站页面开发HTML总结 一、HTML基础语法 1.HTML是什么? ●HTML是HyperText Mark-up Language的首字母简写,即超文本标记语言。 ●HTML不是一种编程语言,而是一种标记语言。 ●超文本指的是超链接,标记指的是标签…...
[个人笔记] vCenter设置时区和NTP同步
VMware虚拟化 - 运维篇 第三章 vCenter设置时区和NTP同步 VMware虚拟化 - 运维篇系列文章回顾vCenter设置时区和NTP同步(附加)ESXi设置alias参考链接 系列文章回顾 第一章 vCenter给虚机添加RDM磁盘 第二章 vCenter回收活跃虚拟机的剩余可用空间 vCente…...
(原创)Flutter与Native通信的方式:EventChannel和BasicMessageChannel
前言 上一篇博客主要介绍了MethodChannel的使用方式 Flutter与Native通信的方式:MethodChannel 这篇博客接着讲另外两种通信方式 EventChannel和BasicMessageChannel EventChannel用于从native向flutter发送通知事件,例如flutter通过其监听Android的重…...
【解决】el-tree报Cannot read property ‘getCheckedKeys‘ of undefined
如果你报错 Cannot read property getCheckedKeys of undefined 或者 Cannot read property getCheckedNodes of undefined 只要在你的在<el-tree>上加个这个,就可以了 ref"tree"...
车载软件架构 —— 信息安全与基础软件
车载软件架构 —— 信息安全与基础软件 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他人的角度来反对自己。人生在世,最怕…...
C\C++内存管理
目录 1.C/C内存分布2.C语言中动态内存管理方式3.C中动态内存管理3.1new/delete内置类型3.2new和delete操作自定义类型 4.operator new与operator delete函数4.2重载operator new与operator delete(了解) 5.new和delete的实现原理5.1内置类型5.2 自定义类…...
会议室预约系统-检验是否被预约核心SQL
会议室预约时,判断能否被预约,即查询是否已经有预约记录,存在不能被预约。 s,e;表示已经预约的开始结束时间; ns,ne,表示表单提交的预约时间; 只需要(ns,ne)与(s,e)区间没有交集,可…...
C++11类模板
类模板是用来生成类的蓝图,与函数模板的不同之处是,编译器不能为类模板推断模板参数类型。 所以我们在使用类的时候要带上<>并且指定类型如下 vector<int> v; // 需要带上<int> 哦定义类模板 如下,和函数模板差不多都是…...
SpiderFlow爬虫平台(爬虫学习)
申明 作为自己学习的记录,方面后期查阅 官网 SpiderFlow官网 简介 spider-flow 是一个爬虫平台,以图形化方式定义爬虫流程,无需代码即可实现一个爬虫 是使用springboot开发的项目,后端代码直接运行即可使用...
Rime输入法配置
Rime输入法在我电脑上,删了装,装了删,已经反复好几次了。就像是Vim,用它的时候,感觉各种配置太麻烦,想要的功能不知道怎么实现。转用其它编辑器的时候,却又念着它的快捷键和可定制性,…...
R语言学习笔记--列表list、数据框
列表 1-列表 列表可以包含不同类型的对象,也就是说,列表不是将某些具体的值组织起来,而是组织R对象。列表将数据组织在一个一维集合中。 列表非常好用,因为它可以装任何类型的对象,不要求数据之间是同质的。 创建列…...
电磁波定义、特性以及信道相关知识
文章目录 前言一、电磁波的定义、特性、波谱1、电磁波的特性2、电磁波谱的划分及用途 二、地球大气层的结构三、电磁波的传播方式1、地波(ground-wave)2、天波(sky-wave)3、视线传播(line-of-sight)①、相关…...
TCP KeepAlive与HTTP Keep-Alive
TCP KeepAlive与HTTP Keep-Alive TCP KeepAliveHTTP Keep-AliveTCP服务器怎么检测客户端断开连接 TCP KeepAlive TCP连接建立之后,如果应用程序或者上层协议一直不发送数据,或者隔很长时间才发送一次数据,那么TCP需要判断是应用程序掉线了还…...
SkyWalking链路追踪-Agent (代理人)
基础概念: SkyWalking链路追踪代理(SkyWalking Tracing Agent)是一种用于收集和传输链路追踪数据的工具。它与应用程序一起部署,并通过自动或手动方式来收集关于应用程序中的请求路径和操作的信息。该代理将收集到的数据发送到Sky…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
Java 加密常用的各种算法及其选择
在数字化时代,数据安全至关重要,Java 作为广泛应用的编程语言,提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景,有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...
怎么让Comfyui导出的图像不包含工作流信息,
为了数据安全,让Comfyui导出的图像不包含工作流信息,导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo(推荐) 在 save_images 方法中,删除或注释掉所有与 metadata …...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像(比如分辨率3000*3000的图像)的办法,尤其是想把内存中的裸数据(只有图像的数据,不包…...
rknn toolkit2搭建和推理
安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 ,不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源(最常用) conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...
