效果图
Version CSS
@keyframes _fade-in_mkmxd_1 {
0% {
filtre : flou (20 px );
opacité : 0
}
à {
filtre : aucun ;
opacité : 1
}
}
@keyframes _drop-in_mkmxd_1 {
0% {
transformer : var(--transform) traduireY(-100px) traduireZ(400px)
}
à {
transformation : var(--transformation)
}
}
._examples_mkmxd_3 {
marge supérieure : 200 px ;
position : relative ;
largeur : 1 000 px ;
hauteur : 640 px ;
transition : transformation en douceur de 0,15 s ;
filtre : ombre portée (0 4px 18px rgba (0,0,0,1));
--grid-width : 140px ;
gauche : 50 % ;
transformer : traduire (-50 %, 0 px );
}
._examples_mkmxd_3 div {
position : relative ;
transition : filtre 0,25 s de sortie facilité ;
animation : _fade-in_mkmxd_1 .35s cubique-bezier(.215,.61,.355,1) var(--delay) en arrière ;
}
._examples_mkmxd_3 div: survol {
filtre : ombre portée (0 4px 8px rgba (0,0,0,.4));
indice z : 3 ;
}
._examples_mkmxd_3 une {
position : absolue ;
--transform: perspective(75em) rotateX(0deg) rotateZ(-0deg) translation(calc(var(--x) * 100%), calc(var(--y) * 86,67%)) scale(1,145);
transformer : var(--transform);
animation : _drop-in_mkmxd_1 .35s cubique-bezier(.215,.61,.355,1) var(--delay) en arrière ;
transition : transformation en douceur de 0,25 s ;
/*clip-path : polygone(50% 100%,93,3% 75%,93,3% 25%,50% 0%,6,7% 25%,6,7% 75%);*/
/*clip-path : polygone(25% 93,3%,75% 93,3%,93,3% 50%,75% 6,7%,25% 6,7%,6,7% 50%);*/
chemin de détourage : polygone (25 % 87 %, 75 % 87 %, 98,3 % 50 %, 75 % 13 %, 25 % 13 %, 1,7 % 50 %) ;
}
._examples_mkmxd_3 a:hover{
transformer : var(--transform) translateZ(10px) scale(1.1);
}
._examples_mkmxd_3 img {
rapport hauteur/largeur : 1 ;
ajustement de l'objet : couverture ;
hauteur : 64px ;
largeur : 64 px ;
transformer : traduire (-50 %, 40 px );
gauche : 50 % ;
position : absolue ;
/*filtre : ombre portée(2px 2px 0px #00BFFF);*/
}
img {
largeur maximale : 100 % ;
hauteur : automatique ;
affichage : bloc ;
}
*{
dimensionnement de la boîte : bordure-boîte ;
}
.menu-box{
affichage : bloc ;
largeur : 200 px ;
hauteur : 200 px ;
/*arrière-plan:rgba(84, 109, 231,.6);*/
fond : violet moyen ;
position : relative ;
}
.menu-texte{
couleur : #fff ;
position : absolue !important ;
haut : 120 px ;
gauche : 50 % ;
poids de la police : gras ;
transformer : traduire (-50 %, 0 px );
/*filtre : ombre portée(2px 2px 0px #00BFFF);*/
taille de police : 16 px ;
alignement du texte : centre ;
}
.back-img{
largeur : 64px !important;
position : absolue ;
gauche : 50 % ;
transformer : traduire (-50 %, 20 px );
/*filtre : ombre portée(2px 2px 0px #00BFFF);*/
}
a:hover+.menu-box .menu-text{
couleur : #00BFFF ;
filtre : ombre portée (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' : élément.x, '--y' : élément.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代码
nouvelle Vue({
el:'#app',
données(){
retour {
menuDonnées : [
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',enfants:[
{
x:0,y:0, chemin :'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',enfants:[
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'E系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'A系统',img:'',enfants:[]
},
]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'C系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'D系统',img:'',enfants:[]
},
]
},
{
x:0,y:0, chemin :'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom :'B系统',img:'../img/navigation/火车站.png',enfants :[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'C系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'D系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'E系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'A系统',img:'',enfants:[]
},
{
x:0,y:0, chemin :'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom :'B系统',img:'',enfants :[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'C系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'D系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'E系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'A系统',img:'',enfants:[]
},
{
x:0,y:0, chemin :'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom :'B系统',img:'',enfants :[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'C系统',img:'',enfants:[]
},
{
x:0,y:0,chemin:'https://observablehq.com/@d3/bar-chart/2?intent=fork',nom:'D系统',img:'',enfants:[]
},
],
données temp : [],
couleurs:[
'#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD',
'#1C86EE', '#00FF7F', '#FF8C00', '#EE1289', '#EE00EE',
'#1E90FF', '#00FF00', '#FFA500', '#FF1493', '#FF00FF',
]
}
},
montre:{
menuDonnées(){
ceci.initCoor()
}
},
monté(){
laissez _this = ceci
ceci.getUser()
// ceci.getMenuData()
this.tempData = this.menuData
ceci.initCoor()
this.timer = setInterval(function(){
_this.localDate = _this.dateFormat(new Date(),'aaaa-MM-jj hh:mm:ss')
},1000)
},
détruit(){
clearInterval(this.timer)
},
méthodes :{
menuEntrée(élément){
if(item.name==='上一层')
retour
this.msgData = élément
this.msgShow = vrai
},
menuQuitter (élément){
this.msgShow = faux
},
showTime (élément) {
if(item.name==='上一层')
renvoyer des '0'
retourner Math.random()+'s'
},
menuClick(élément,parent){
laissez arr =[]
if(item.name==='上一层'){
this.changeMenu(item.children)
}sinon si(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)
}autre{
window.location.href = item.path
}
},
changeMenu(données){
laissez _this = ceci
ceci.tempData = []
setTimeout(fonction(){
_this.tempData = données
_this.initCoor()
},10)
},
initCoor(){
this.tempData.forEach((t,index)=>{
t.color = this.colors[index]
t.showTime = this.showTime(t)
si(!t.enfants){
t.enfants = []
}
si(index<5){
Ty=0
tx=indice*0,86
si(index%2!==0){
ty += 0,5
// tx = (indice-1)+0,8
}
}sinon si(index>4&&index<10){
Ty=1
tx=(indice-5)*0,86
si(index%2===0){
ty += 0,5
// tx = (indice-1)+0,8
}
}sinon si(index>9&&index<15){
Ty=2
tx=(indice-10)*0,86
si(index%2!==0){
té += 0,5
// tx = (indice-1)+0,8
}
}
})
},
}
})到此这篇关于html实现蜂窝菜单的示例代码的文章就介绍到这了,更多相关html蜂窝菜单内容请搜索dow ncodes.com propose des solutions pour les utilisateurs de ncodes.com et downcodes.com！