效果圖
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！