效果图
Versão CSS
@keyframes _fade-in_mkmxd_1 {
0% {
filtro: desfoque (20px);
opacidade: 0
}
para {
filtro: nenhum;
opacidade: 1
}
}
@keyframes _drop-in_mkmxd_1 {
0% {
transformar: var(--transform) traduzirY(-100px) traduzirZ(400px)
}
para {
transformar: var(--transformar)
}
}
._examples_mkmxd_3 {
margem superior: 200px;
posição: relativa;
largura:1000px;
altura: 640px;
transição: transformação 0,15s de atenuação;
filtro: sombra projetada (0 4px 18px rgba (0,0,0,1));
--largura da grade: 140px;
esquerda: 50%;
transformar: traduzir(-50%, 0px);
}
._examples_mkmxd_3 div {
posição: relativa;
transição: filtro 0,25s de atenuação;
animação: _fade-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) para trás;
}
._examples_mkmxd_3 div:hover {
filtro: sombra projetada (0 4px 8px rgba (0,0,0,.4));
índice z: 3;
}
._examples_mkmxd_3 a {
posição: absoluta;
--transform: perspectiva(75em) girarX(0deg) girarZ(-0deg) traduzir(calc(var(--x) * 100%), calc(var(--y) * 86,67%)) escala(1,145);
transformar: var(--transformar);
animação: _drop-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) para trás;
transição: transformação 0,25s de atenuação;
/*caminho do clipe: polígono(50% 100%,93,3% 75%,93,3% 25%,50% 0%,6,7% 25%,6,7% 75%);*/
/*caminho do clipe: polígono(25% 93,3%,75% 93,3%,93,3% 50%,75% 6,7%,25% 6,7%,6,7% 50%);*/
caminho do clipe: polígono (25% 87%,75% 87%,98,3% 50%,75% 13%,25% 13%,1,7% 50%);
}
._examples_mkmxd_3 a:hover{
transformar: var(--transform) traduzirZ(10px) escala(1.1);
}
._examples_mkmxd_3 img {
proporção: 1;
ajuste ao objeto: capa;
altura: 64px;
largura: 64px;
transformar: traduzir(-50%, 40px);
esquerda: 50%;
posição: absoluta;
/*filtro: sombra projetada(2px 2px 0px #00BFFF);*/
}
imagem {
largura máxima: 100%;
altura: automático;
exibição: bloco;
}
*{
dimensionamento de caixa: caixa de borda;
}
.caixa de menu{
exibição: bloco;
largura:200px;
altura:200px;
/*plano de fundo:rgba(84, 109, 231,.6);*/
fundo: roxo médio;
posição: relativa;
}
.menu-texto{
cor: #fff;
posição: absoluto! Importante;
superior: 120px;
esquerda: 50%;
peso da fonte: negrito;
transformar: traduzir(-50%, 0px);
/*filtro: sombra projetada(2px 2px 0px #00BFFF);*/
tamanho da fonte: 16px;
alinhamento de texto: centro;
}
.back-img{
largura: 64px! Importante;
posição: absoluta;
esquerda: 50%;
transformar: traduzir(-50%, 20px);
/*filtro: sombra projetada(2px 2px 0px #00BFFF);*/
}
a:hover+.menu-box .menu-text{
cor: #00BFFF;
filtro: sombra projetada (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
novo Vue({
el:'#app',
dados(){
retornar {
menuDados:[
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'A系统',img:'',filhos:[
{
x:0,y:0, caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'B系统',img:'',filhos:[
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'E系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'A系统',img:'',filhos:[]
},
]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'C系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'D系统',img:'',filhos:[]
},
]
},
{
x:0,y:0, caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'B系统',img:'../img/navigation/火车站.png',crianças:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'C系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'D系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'E系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'A系统',img:'',filhos:[]
},
{
x:0,y:0, caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'B系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'C系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'D系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'E系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'A系统',img:'',filhos:[]
},
{
x:0,y:0, caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'B系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'C系统',img:'',filhos:[]
},
{
x:0,y:0,caminho:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nome:'D系统',img:'',filhos:[]
},
],
dados temporários:[],
cores:[
'#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD',
'#1C86EE', '#00FF7F', '#FF8C00', '#EE1289', '#EE00EE',
'#1E90FF', '#00FF00', '#FFA500', '#FF1493', '#FF00FF',
]
}
},
assistir:{
menuDados(){
this.initCoor()
}
},
montado(){
deixe _isso = isso
this.getUser()
//this.getMenuData()
this.tempData = this.menuData
this.initCoor()
this.timer = setInterval(function(){
_this.localDate = _this.dateFormat(nova Data(),'aaaa-MM-dd hh:mm:ss')
},1000)
},
destruído(){
clearInterval(this.timer)
},
métodos:{
menuEnter(item){
if(item.name==='上一层')
retornar
this.msgData = item
this.msgShow = verdadeiro
},
menuLeave(item){
this.msgShow = falso
},
showTime(item){
if(item.name==='上一层')
retornar '0s'
retornar Math.random()+'s'
},
menuClick(item,parant){
deixe arr =[]
if(item.name==='上一层'){
this.changeMenu(item.filhos)
}else if(item.filhos.length>0){
arr.push({x:0,y:0,caminho:'',nome:'上一层',imgPath:'../img/navigation/icon-返回一一级.png',filhos:parant} )
item.crianças.forEach(t=>{
arr.push(t)
})
this.changeMenu(arr)
}outro{
janela.localização.href = item.caminho
}
},
alterarMenu(dados){
deixe _isso = isso
this.tempData = []
setTimeout(função(){
_this.tempData = dados
_this.initCoor()
},10)
},
initCoor(){
this.tempData.forEach((t,index)=>{
t.color = this.colors[índice]
t.showTime = this.showTime (t)
if(!t.filhos){
t.crianças = []
}
if(índice<5){
ty = 0
tx=índice*0,86
if(índice%2!==0){
ty += 0,5
// tx = (índice-1)+0,8
}
}else if(índice>4&&índice<10){
ty = 1
tx=(índice-5)*0,86
if(índice%2===0){
ty += 0,5
// tx = (índice-1)+0,8
}
}else if(índice>9&&índice<15){
ty = 2
tx=(índice-10)*0,86
if(índice%2!==0){
ty += 0,5
// tx = (índice-1)+0,8
}
}
})
},
}
})到此这篇关于html实现蜂窝菜单的示例代码的文章就介绍到这了,更多相关html蜂窝菜单内容请搜索dow ncodes.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持downcodes.com！