• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    html实现蜂窝菜单的示例代码

    发布者: 涵韵 | 发布时间: 2025-8-17 00:20| 查看数: 85| 评论数: 0|帖子模式

    效果图



    CSS样式
    1. @keyframes _fade-in_mkmxd_1 {
    2.     0% {
    3.         filter: blur(20px);
    4.         opacity: 0
    5.     }
    6.     to {
    7.         filter: none;
    8.         opacity: 1
    9.     }
    10. }
    11. @keyframes _drop-in_mkmxd_1 {
    12.     0% {
    13.         transform: var(--transform) translateY(-100px) translateZ(400px)
    14.     }
    15.     to {
    16.         transform: var(--transform)
    17.     }
    18. }
    19. ._examples_mkmxd_3 {
    20.     margin-top:200px;
    21.     position: relative;
    22.     width:1000px;
    23.     height: 640px;
    24.     transition: transform .15s ease-out;
    25.     filter: drop-shadow(0 4px 18px rgba(0,0,0,1));
    26.     --grid-width: 140px;
    27.     left: 50%;
    28.     transform: translate(-50%, 0px);
    29. }
    30. ._examples_mkmxd_3 div {
    31.     position: relative;
    32.     transition: filter .25s ease-out;
    33.     animation: _fade-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;
    34. }
    35. ._examples_mkmxd_3 div:hover {
    36.     filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
    37.     z-index: 3;
    38. }
    39. ._examples_mkmxd_3 a {
    40.     position: absolute;
    41.     --transform: perspective(75em) rotateX(0deg) rotateZ(-0deg) translate(calc(var(--x) * 100%), calc(var(--y) * 86.67%)) scale(1.145);
    42.     transform: var(--transform);
    43.     animation: _drop-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;
    44.     transition: transform .25s ease-out;
    45.     /*clip-path: polygon(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%);*/
    46.     /*clip-path: polygon(25% 93.3%,75% 93.3%,93.3% 50%,75% 6.7%,25% 6.7%,6.7% 50%);*/
    47.     clip-path: polygon(25% 87%,75% 87%,98.3% 50%,75% 13%,25% 13%,1.7% 50%);
    48. }
    49. ._examples_mkmxd_3 a:hover{
    50.     transform: var(--transform) translateZ(10px) scale(1.1);
    51. }
    52. ._examples_mkmxd_3 img {
    53.     aspect-ratio: 1;
    54.     object-fit: cover;
    55.     height: 64px;
    56.     width: 64px;
    57.     transform: translate(-50%, 40px);
    58.     left: 50%;
    59.     position: absolute;
    60.     /*filter: drop-shadow(2px 2px 0px #00BFFF);*/
    61. }
    62. img {
    63.     max-width: 100%;
    64.     height: auto;
    65.     display: block;
    66. }
    67. *{
    68.     box-sizing: border-box;
    69. }
    70. .menu-box{
    71.     display: block;
    72.     width:200px;
    73.     height:200px;
    74.     /*background:rgba(84, 109, 231,.6);*/
    75.     background: mediumpurple;
    76.     position: relative;
    77. }
    78. .menu-text{
    79.     color: #fff;
    80.     position: absolute !important;
    81.     top: 120px;
    82.     left: 50%;
    83.     font-weight: bold;
    84.     transform: translate(-50%, 0px);
    85.     /*filter: drop-shadow(2px 2px 0px #00BFFF);*/
    86.     font-size: 16px;
    87.     text-align: center;
    88. }
    89. .back-img{
    90.     width: 64px !important;
    91.     position: absolute;
    92.     left: 50%;
    93.     transform: translate(-50%, 20px);
    94.     /*filter: drop-shadow(2px 2px 0px #00BFFF);*/
    95. }
    96. a:hover+.menu-box .menu-text{
    97.     color: #00BFFF;
    98.     filter: drop-shadow(2px 2px 0px #fff);
    99. }
    复制代码
    html
    1. <div class="_examples_mkmxd_3" >
    2.     <div v-for="(item,index) in tempData" :key="index" :style="{'--delay': item.showTime}">
    3.         <a href="#" :title="item.name" @mouseenter="menuEnter(item)" @mouseleave="menuLeave(item)" @click="menuClick(item,tempData)" :style="{'--x': item.x, '--y': item.y}">
    4.             <span class="menu-box" :style="{'background':item.color}">
    5.                 <img v-if="item.name!=='上一层'" :src="item.imgPath?item.imgPath:'../img/navigation/火车站.png'" >
    6.                 <img v-if="item.imgPath&&item.name==='上一层'" :src="item.imgPath" class="back-img">
    7.                 <span class="menu-text">{{item.name}}</span>
    8.             </span>
    9.         </a>
    10.     </div>
    11. </div>
    复制代码
    vue代码
    1. new Vue({
    2.     el:'#app',
    3.     data(){
    4.         return {
    5.             menuData:[
    6.                 {
    7.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[
    8.                         {
    9.                             x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[
    10.                                 {
    11.                                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
    12.                                 },
    13.                                 {
    14.                                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
    15.                                 },
    16.                             ]
    17.                         },
    18.                         {
    19.                             x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
    20.                         },
    21.                         {
    22.                             x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
    23.                         },
    24.                     ]
    25.                 },
    26.                 {
    27.                     x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'../img/navigation/火车站.png',children:[]
    28.                 },
    29.                 {
    30.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
    31.                 },
    32.                 {
    33.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
    34.                 },
    35.                 {
    36.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
    37.                 },
    38.                 {
    39.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
    40.                 },
    41.                 {
    42.                     x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[]
    43.                 },
    44.                 {
    45.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
    46.                 },
    47.                 {
    48.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
    49.                 },
    50.                 {
    51.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'E系统',img:'',children:[]
    52.                 },
    53.                 {
    54.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'A系统',img:'',children:[]
    55.                 },
    56.                 {
    57.                     x:0,y:0, path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'B系统',img:'',children:[]
    58.                 },
    59.                 {
    60.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'C系统',img:'',children:[]
    61.                 },
    62.                 {
    63.                     x:0,y:0,path:'https://observablehq.com/@d3/bar-chart/2?intent=fork',name:'D系统',img:'',children:[]
    64.                 },
    65.             ],
    66.             tempData:[],         
    67.             colors:[
    68.                 '#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD',
    69.                 '#1C86EE', '#00FF7F', '#FF8C00', '#EE1289', '#EE00EE',
    70.                 '#1E90FF', '#00FF00', '#FFA500', '#FF1493', '#FF00FF',
    71.             ]
    72.         }
    73.     },
    74.     watch:{
    75.         menuData(){
    76.             this.initCoor()
    77.         }
    78.     },
    79.     mounted(){
    80.         let _this = this
    81.         this.getUser()
    82.         // this.getMenuData()
    83.         this.tempData = this.menuData
    84.         this.initCoor()
    85.         this.timer = setInterval(function(){
    86.             _this.localDate = _this.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
    87.         },1000)
    88.     },
    89.     destroyed(){
    90.         clearInterval(this.timer)
    91.     },
    92.     methods:{
    93.         menuEnter(item){
    94.             if(item.name==='上一层')
    95.                 return
    96.             this.msgData = item
    97.             this.msgShow = true
    98.         },
    99.         menuLeave(item){
    100.             this.msgShow = false
    101.         },           
    102.         showTime(item){
    103.             if(item.name==='上一层')
    104.                 return '0s'
    105.             return Math.random()+'s'
    106.         },
    107.         menuClick(item,parant){
    108.             let  arr =[]
    109.             if(item.name==='上一层'){
    110.                 this.changeMenu(item.children)
    111.             }else if(item.children.length>0){
    112.                 arr.push({x:0,y:0,path:'',name:'上一层',imgPath:'../img/navigation/icon-返回上一级.png',children:parant})
    113.                 item.children.forEach(t=>{
    114.                     arr.push(t)
    115.                 })
    116.                 this.changeMenu(arr)
    117.             }else{
    118.                 window.location.href = item.path
    119.             }
    120.         },
    121.         changeMenu(data){
    122.             let _this = this
    123.             this.tempData = []
    124.             setTimeout(function(){
    125.                 _this.tempData = data
    126.                 _this.initCoor()
    127.             },10)
    128.         },
    129.         initCoor(){
    130.             this.tempData.forEach((t,index)=>{
    131.                 t.color = this.colors[index]
    132.                 t.showTime = this.showTime(t)
    133.                 if(!t.children){
    134.                     t.children = []
    135.                 }               
    136.                 if(index<5){
    137.                     t.y=0
    138.                     t.x=index*0.86
    139.                     if(index%2!==0){
    140.                         t.y += 0.5
    141.                         // t.x = (index-1)+0.8
    142.                     }
    143.                 }else if(index>4&&index<10){
    144.                     t.y=1
    145.                     t.x=(index-5)*0.86
    146.                     if(index%2===0){
    147.                         t.y +=  0.5
    148.                         // t.x = (index-1)+0.8
    149.                     }
    150.                 }else if(index>9&&index<15){
    151.                     t.y=2
    152.                     t.x=(index-10)*0.86
    153.                     if(index%2!==0){
    154.                         t.y += 0.5
    155.                         // t.x = (index-1)+0.8
    156.                     }
    157.                 }
    158.             })
    159.         },      
    160.     }
    161. })
    复制代码
    到此这篇关于html实现蜂窝菜单的示例代码的文章就介绍到这了,更多相关html蜂窝菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：互联网
    免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表