效果图
CSS-элементы
@keyframes _fade-in_mkmxd_1 {
0% {
фильтр: размытие (20 пикселей);
непрозрачность: 0
}
к {
фильтр: нет;
непрозрачность: 1
}
}
@keyframes _drop-in_mkmxd_1 {
0% {
преобразование: var(--transform) TranslateY(-100px) TranslateZ(400px)
}
к {
преобразование: вар (--transform)
}
}
._examples_mkmxd_3 {
маржа-верх: 200 пикселей;
положение: относительное;
ширина: 1000 пикселей;
высота: 640 пикселей;
переход: трансформация .15s легкость выхода;
фильтр: drop-shadow(0 4px 18px rgba(0,0,0,1));
--grid-width: 140 пикселей;
осталось: 50%;
трансформировать: транслировать (-50%, 0 пикселей);
}
._examples_mkmxd_3 div {
положение: относительное;
переход: фильтр .25с, ослабление;
анимация: _fade-in_mkmxd_1 .35scuba-bezier(.215,.61,.355,1) var(--delay) назад;
}
._examples_mkmxd_3 div:hover {
фильтр: drop-shadow(0 4px 8px rgba(0,0,0,.4));
z-индекс: 3;
}
._examples_mkmxd_3 а {
позиция: абсолютная;
--transform: перспектива(75em) RotateX(0deg) RotateZ(-0deg) Translate(calc(var(--x) * 100%), Calc(var(--y) * 86.67%)) Scale(1.145);
трансформировать: вар (--трансформировать);
анимация: _drop-in_mkmxd_1 .35scuba-bezier(.215,.61,.355,1) var(--delay) назад;
переход: трансформация .25s легкость выхода;
/*clip-path: полигон(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%);*/
/*clip-path: полигон(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:hover{
преобразование: var(--transform) TranslateZ(10px) Scale(1.1);
}
._examples_mkmxd_3 изображение {
соотношение сторон: 1;
объектное соответствие: обложка;
высота: 64 пикселей;
ширина: 64 пикселей;
трансформировать: транслировать (-50%, 40 пикселей);
осталось: 50%;
позиция: абсолютная;
/*фильтр: тень(2px 2px 0px #00BFFF);*/
}
изображение {
максимальная ширина: 100%;
высота: авто;
дисплей: блок;
}
*{
размер коробки: граница-коробка;
}
.меню-бокс{
дисплей: блок;
ширина: 200 пикселей;
высота: 200 пикселей;
/*background:rgba(84, 109, 231,.6);*/
фон: средне-фиолетовый;
положение: относительное;
}
.меню-текст{
цвет: #fff;
позиция: абсолютная !важная;
верх: 120 пикселей;
осталось: 50%;
начертание шрифта: жирный;
трансформировать: транслировать (-50%, 0 пикселей);
/*фильтр: тень(2px 2px 0px #00BFFF);*/
размер шрифта: 16 пикселей;
выравнивание текста: по центру;
}
.back-img{
ширина: 64 пикселей! важно;
позиция: абсолютная;
осталось: 50%;
трансформировать: транслировать (-50%, 20 пикселей);
/*фильтр: тень(2px 2px 0px #00BFFF);*/
}
а:hover+.menu-box .menu-text{
цвет: #00BFFF;
фильтр: тень (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>
</а>
</div>
</div>vue代码
новый Vue({
эль:'#приложение',
данные(){
возвращаться {
данные меню:[
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',дети:[
{
x:0,y:0, путь:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',дети:[
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',дети:[]
},
]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',дети:[]
},
]
},
{
x:0,y:0, путь:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'../img/navigation/火车站.png',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',дети:[]
},
{
x:0,y:0, путь:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',дети:[]
},
{
x:0,y:0, путь:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',дети:[]
},
{
x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',дети:[]
},
],
темпданные:[],
цвета:[
'#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD',
'#1C86EE', '#00FF7F', '#FF8C00', '#EE1289', '#EE00EE',
'#1E90FF', '#00FF00', '#FFA500', '#FF1493', '#FF00FF',
]
}
},
смотреть:{
менюДанные(){
это.initCoor()
}
},
смонтирован(){
пусть _this = это
это.getUser()
// this.getMenuData()
this.tempData = this.menuData
это.initCoor()
this.timer = setInterval(function(){
_this.localDate = _this.dateFormat(new Date(),'гггг-ММ-дд чч:мм:сс')
},1000)
},
уничтожен () {
очиститьИнтервал (этот.таймер)
},
методы:{
менюВвод(пункт){
if(item.name==='上一层')
возвращаться
this.msgData = элемент
this.msgShow = правда
},
менюLeave (пункт) {
this.msgShow = ложь
},
showTime (пункт) {
if(item.name==='上一层')
вернуть '0'
вернуть Math.random()+'
},
MenuClick(пункт,parant){
пусть обр =[]
if(item.name==='上一层'){
this.changeMenu(item.children)
}иначе если(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(обр.)
}еще{
window.location.href = item.path
}
},
изменитьМеню (данные) {
пусть _this = это
this.tempData = []
setTimeout(функция(){
_this.tempData = данные
_this.initCoor()
},10)
},
initCoor(){
this.tempData.forEach((t,index)=>{
t.color = this.colors[индекс]
t.showTime = this.showTime(t)
если(!t.дети){
т.дети = []
}
если (индекс<5){
ты=0
tx=индекс*0,86
если(индекс%2!==0){
ты += 0,5
// tx = (индекс-1)+0,8
}
}иначе если(индекс>4&&индекс<10){
ты=1
tx=(индекс-5)*0,86
если(индекс%2===0){
ты += 0,5
// tx = (индекс-1)+0,8
}
}иначе если(индекс>9&&индекс<15){
ты=2
tx=(индекс-10)*0,86
если(индекс%2!==0){
ты += 0,5
// tx = (индекс-1)+0,8
}
}
})
},
}
})html-файлы с принтом в формате html, которые помогут вам в этом.介绍到这了,更多相关html蜂窝菜单内容请搜索dow ncodes.com — это сайт, который может быть использован в качестве исходного кода, а также логотип Downcodes.com！