效果图
CSS样式
@keyframes_fade-in_mkmxd_1 {
0% {
滤镜：模糊（20px）；
不透明度：0
}
到 {
过滤器：无；
不透明度：1
}
}
@keyframes _drop-in_mkmxd_1 {
0% {
变换：var（--变换）translateY（-100px）translateZ（400px）
}
到 {
变换：var(--变换)
}
}
._examples_mkmxd_3 {
顶部边距：200px；
位置：相对；
宽度：1000px；
高度：640像素；
过渡：变换 0.15 秒缓出；
过滤器： drop-shadow(0 4px 18px rgba(0,0,0,1));
--网格宽度：140px；
左：50%；
变换：翻译（-50%，0px）；
}
._examples_mkmxd_3 div {
位置：相对；
过渡：过滤 0.25 秒缓出；
动画：_fade-in_mkmxd_1 .35s 立方贝塞尔曲线(.215,.61,.355,1) var(--delay) 向后；
}
._examples_mkmxd_3 div:悬停{
过滤器： drop-shadow(0 4px 8px rgba(0,0,0,.4));
z 索引：3；
}
._examples_mkmxd_3 a {
位置：绝对；
--transform: 透视(75em) 旋转X(0deg) 旋转Z(-0deg) 平移(calc(var(--x) * 100%), calc(var(--y) * 86.67%)) 缩放(1.145);
变换：var(--变换)；
动画：_drop-in_mkmxd_1 .35s 三次贝塞尔曲线(.215,.61,.355,1) var(--delay) 向后；
过渡：变换 0.25 秒缓出；
/*剪辑路径:多边形(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%);*/
/*剪辑路径:多边形(25% 93.3%,75% 93.3%,93.3% 50%,75% 6.7%,25% 6.7%,6.7% 50%);*/
剪辑路径：多边形(25% 87%,75% 87%,98.3% 50%,75% 13%,25% 13%,1.7% 50%);
}
._examples_mkmxd_3 a：悬停{
变换：var（--变换）translateZ（10px）缩放（1.1）；
}
._examples_mkmxd_3 img {
纵横比：1；
对象适配：覆盖；
高度：64像素；
宽度：64 像素；
变换：翻译（-50%，40px）；
左：50%；
位置：绝对；
/*滤镜: drop-shadow(2px 2px 0px #00BFFF);*/
}
图像{
最大宽度：100%；
高度：自动；
显示：块；
}
*{
框大小：边框框；
}
.菜单框{
显示：块；
宽度：200px；
高度：200px；
/*背景:rgba(84, 109, 231,.6);*/
背景：中紫色；
位置：相对；
}
.菜单文本{
颜色：#fff；
位置：绝对！重要；
顶部：120 像素；
左：50%；
字体粗细：粗体；
变换：翻译（-50%，0px）；
/*滤镜: drop-shadow(2px 2px 0px #00BFFF);*/
字体大小：16px；
文本对齐：居中；
}
.back-img{
宽度：64px！重要；
位置：绝对；
左：50%；
变换：翻译（-50%，20px）；
/*滤镜: drop-shadow(2px 2px 0px #00BFFF);*/
}
a:hover+.menu-box .menu-text{
颜色：#00BFFF；
过滤器： 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代码
新的Vue（{
el:'#app',
数据（）{
返回 {
菜单数据：[
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[
{
x:0,y:0, 路径:'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, 路径:'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, 路径:'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, 路径:'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:[]
},
],
临时数据：[]，
颜色：[
'#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD',
“#1C86EE”、“#00FF7F”、“#FF8C00”、“#EE1289”、“#EE00EE”、
“#1E90FF”、“#00FF00”、“#FFA500”、“#FF1493”、“#FF00FF”、
]
}
},
手表：{
菜单数据（）{
this.initCoor()
}
},
安装（）{
让 _this = 这个
this.getUser()
// this.getMenuData()
this.tempData = this.menuData
this.initCoor()
this.timer = setInterval(function(){
_this.localDate = _this.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
},1000)
},
被摧毁（）{
清除间隔(this.timer)
},
方法：{
菜单输入（项目）{
if(item.name==='上一层')
返回
this.msgData = 项目
this.msgShow = true
},
菜单离开（项目）{
this.msgShow = false
},
显示时间（项目）{
if(item.name==='上一层')
返回“0”
返回 Math.random()+'s'
},
menuClick(项目,父级){
让 arr =[]
if(item.name==='上一层'){
this.changeMenu(item.children)
}否则 if(item.children.length>0){
arr.push({x:0,y:0,path:'',name:'上一层',imgPath:'../img/navigation/icon-返回上一级.png',children:parant} ）
item.children.forEach(t=>{
到达.push(t)
})
this.changeMenu(arr)
}别的{
window.location.href = item.path
}
},
更改菜单（数据）{
让 _this = 这个
this.tempData = []
设置超时（函数（）{
_this.tempData = 数据
_this.initCoor()
},10)
},
初始化坐标(){
this.tempData.forEach((t,index)=>{
t.color = this.colors[索引]
t.showTime = this.showTime(t)
if(!t.children){
t.children = []
}
如果（索引<5）{
ty=0
交易=指数*0.86
if(索引%2!==0){
ty += 0.5
// 交易 = (index-1)+0.8
}
}否则如果(索引>4&&索引<10){
ty=1
交易=(索引-5)*0.86
if(索引%2===0){
ty += 0.5
// 交易 = (index-1)+0.8
}
}否则如果(索引>9&&索引<15){
ty=2
交易=(索引-10)*0.86
if(索引%2!==0){
ty += 0.5
// 交易 = (index-1)+0.8
}
}
})
},
}
})到这里这篇关于html实现蜂窝菜单的示例代码的文章就介绍到这里了，更多相关html蜂窝菜单内容请搜索downcodes.com以前的文章或继续下面的相关文章，希望大家浏览以后多多支持downcodes。 com！