html实现蜂窝菜单

news2024/11/11 16:42:19

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS样式

@keyframes _fade-in_mkmxd_1 {
    0% {
        filter: blur(20px);
        opacity: 0
    }
    to {
        filter: none;
        opacity: 1
    }
}
@keyframes _drop-in_mkmxd_1 {
    0% {
        transform: var(--transform) translateY(-100px) translateZ(400px)
    }
    to {
        transform: var(--transform)
    }
}
._examples_mkmxd_3 {
    margin-top:200px;
    position: relative;
    width:1000px;
    height: 640px;
    transition: transform .15s ease-out;
    filter: drop-shadow(0 4px 18px rgba(0,0,0,1));
    --grid-width: 140px;
    left: 50%;
    transform: translate(-50%, 0px);
}
._examples_mkmxd_3 div {
    position: relative;
    transition: filter .25s ease-out;
    animation: _fade-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;
}
._examples_mkmxd_3 div:hover {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
    z-index: 3;
}
._examples_mkmxd_3 a {
    position: absolute;
    --transform: perspective(75em) rotateX(0deg) rotateZ(-0deg) translate(calc(var(--x) * 100%), calc(var(--y) * 86.67%)) scale(1.145);
    transform: var(--transform);
    animation: _drop-in_mkmxd_1 .35s cubic-bezier(.215,.61,.355,1) var(--delay) backwards;
    transition: transform .25s ease-out;
    /*clip-path: polygon(50% 100%,93.3% 75%,93.3% 25%,50% 0%,6.7% 25%,6.7% 75%);*/
    /*clip-path: polygon(25% 93.3%,75% 93.3%,93.3% 50%,75% 6.7%,25% 6.7%,6.7% 50%);*/
    clip-path: polygon(25% 87%,75% 87%,98.3% 50%,75% 13%,25% 13%,1.7% 50%);
}
._examples_mkmxd_3 a:hover{
    transform: var(--transform) translateZ(10px) scale(1.1);
}
._examples_mkmxd_3 img {
    aspect-ratio: 1;
    object-fit: cover;
    height: 64px;
    width: 64px;
    transform: translate(-50%, 40px);
    left: 50%;
    position: absolute;
    /*filter: drop-shadow(2px 2px 0px #00BFFF);*/
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
*{
    box-sizing: border-box;
}
.menu-box{
    display: block;
    width:200px;
    height:200px;
    /*background:rgba(84, 109, 231,.6);*/
    background: mediumpurple;
    position: relative;
}
.menu-text{
    color: #fff;
    position: absolute !important;
    top: 120px;
    left: 50%;
    font-weight: bold;
    transform: translate(-50%, 0px);
    /*filter: drop-shadow(2px 2px 0px #00BFFF);*/
    font-size: 16px;
    text-align: center;
}
.back-img{
    width: 64px !important;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 20px);
    /*filter: drop-shadow(2px 2px 0px #00BFFF);*/
}
a:hover+.menu-box .menu-text{
    color: #00BFFF;
    filter: 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代码

new Vue({
    el:'#app',
    data(){
        return {
            menuData:[
                {
                    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:'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, path:'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, path:'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, path:'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:[]
                },
            ],
            tempData:[],         
            colors:[
                '#1874CD', '#3CB371', '#FF7F50', '#CD1076', '#CD00CD',
                '#1C86EE', '#00FF7F', '#FF8C00', '#EE1289', '#EE00EE',
                '#1E90FF', '#00FF00', '#FFA500', '#FF1493', '#FF00FF',
            ]
        }
    },
    watch:{
        menuData(){
            this.initCoor()
        }
    },
    mounted(){
        let _this = 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)
    },
    destroyed(){
        clearInterval(this.timer)
    },
    methods:{
        menuEnter(item){
            if(item.name==='上一层')
                return
            this.msgData = item
            this.msgShow = true
        },
        menuLeave(item){
            this.msgShow = false
        },           
        showTime(item){
            if(item.name==='上一层')
                return '0s'
            return Math.random()+'s'
        },
        menuClick(item,parant){
            let  arr =[]
            if(item.name==='上一层'){
                this.changeMenu(item.children)
            }else if(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)

            }else{
                window.location.href = item.path
            }
        },
        changeMenu(data){
            let _this = this
            this.tempData = []
            setTimeout(function(){
                _this.tempData = data
                _this.initCoor()
            },10)
        },
        initCoor(){
            this.tempData.forEach((t,index)=>{
                t.color = this.colors[index]
                t.showTime = this.showTime(t)
                if(!t.children){
                    t.children = []
                }               
                if(index<5){
                    t.y=0
                    t.x=index*0.86
                    if(index%2!==0){
                        t.y += 0.5
                        // t.x = (index-1)+0.8
                    }
                }else if(index>4&&index<10){
                    t.y=1
                    t.x=(index-5)*0.86
                    if(index%2===0){
                        t.y +=  0.5
                        // t.x = (index-1)+0.8
                    }
                }else if(index>9&&index<15){
                    t.y=2
                    t.x=(index-10)*0.86
                    if(index%2!==0){
                        t.y += 0.5
                        // t.x = (index-1)+0.8
                    }
                }
            })
        },      
     
    }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/802084.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

layui各种事件无效（例如表格重载或 分页插件按钮失效）的解决方法

layui各种事件无效（例如表格重载或 分页插件按钮失效）的解决方法

下图是我一个系统的操作日志&#xff0c;在分页插件右下角嵌入了一个导出所有数据的按钮 &#xff0c;代码没有任何问题&#xff0c;点击导出按钮却失效 排查之后&#xff0c;发现表格标签table定义了ID又定义了lay-filter&#xff0c;因我使用的layui从2.7.6升级到2.8.11&…
阅读更多...
JMeter接口测试：BeanShell实现接口的加密和解密

JMeter接口测试：BeanShell实现接口的加密和解密

前些天用JMeter写了一个接口的自动化脚本&#xff0c;请求参数加密和响应数据解密都覆盖到了&#xff0c;中间涉及了BeanShell脚本编写和导入jar包的一些方法&#xff0c;想着挺有代表性的&#xff0c;分享给大家&#xff0c;希望对大家的接口自动化测试有所启发。 这是一个注册…
阅读更多...
简化Java单元测试数据

简化Java单元测试数据

用EasyModeling简化Java单元测试 EasyModeling 是我在2021年圣诞假期期间开发的一个 Java 注解处理器&#xff0c;采用 Apache-2.0 开源协议。它可以帮助 Java 单元测试的编写者快速构造用于测试的数据模型实例&#xff0c;简化 Java 项目在单元测试中准备测试数据的工作&…
阅读更多...
半路杀出个“程咬金”，谁在吹响智能化供应链重构号角

半路杀出个“程咬金”，谁在吹响智能化供应链重构号角

汽车智能化的竞争&#xff0c;不再是平行模式&#xff08;车企与车企、Tier1与Tier1&#xff09;&#xff0c;也不再是一边倒的车企自研模式&#xff0c;更不是纯粹的B2C模式。 随着昨天大众集团对外官宣与小鹏、上汽的深度合作启动&#xff0c;围绕电动化、智能化的竞争无疑进…
阅读更多...
PHP注册、登陆、6套主页-带Thinkphp目录解析-【白嫖项目】

PHP注册、登陆、6套主页-带Thinkphp目录解析-【白嫖项目】

强撸项目系列总目录在000集 PHP要怎么学–【思维导图知识范围】 文章目录 本系列校训本项目使用技术 上效果图主页注册&#xff0c;登陆 phpStudy 设置导数据库项目目录如图&#xff1a;代码部分&#xff1a;控制器前台的首页 其它配套页面展示直接给第二套方案的页面吧第三套…
阅读更多...
Talk | 南洋理工大学博士后研究员李祥泰：基于Transformer的视觉分割模型总结、回顾与展望

Talk | 南洋理工大学博士后研究员李祥泰：基于Transformer的视觉分割模型总结、回顾与展望

​ 本期为TechBeat人工智能社区第517期线上Talk&#xff01; 北京时间7月27日(周四)20:00&#xff0c;南洋理工大学博士后研究员—李祥泰的Talk已经准时在TechBeat人工智能社区开播了&#xff01; 他与大家分享的主题是: “基于Transformer的视觉分割模型总结、回顾与展望”&am…
阅读更多...
无涯教程-jQuery - animate()方法函数

无涯教程-jQuery - animate()方法函数

animate()方法执行一组CSS属性的自定义动画。 animate( params, [duration, easing, callback] ) - 语法 selector.animate( params, [duration, easing, callback] ); 这是此方法使用的所有参数的说明 params - 动画将朝其移动的CSS属性图。duration - 这是可选…
阅读更多...
idea常用技巧/idea常见问题

idea常用技巧/idea常见问题

idea常见问题 idea全局搜索默认只显示100条解决方案 如上图&#xff0c;每次搜索时只显示100条&#xff0c;没法展示全。因版本的不同&#xff0c;配置也有些差异&#xff0c;以下也是经过各种搜索整理出了两个方案来解决这个问题。 方案一&#xff1a; 快捷键Ctrl shift a…
阅读更多...
windows环境启动redis-server.exe出现闪退问题解决方案(亲测有效)

windows环境启动redis-server.exe出现闪退问题解决方案(亲测有效)

现象 windows环境下&#xff0c;启动redis-server.exe&#xff0c;出现闪退现象 解决方案 在你的redis解压目录下&#xff0c;新建一个start.bat文件 在start.bat文件里面写上这一句话&#xff1a; redis-server.exe redis.windows.conf然后保存&#xff0c;后面启动redis…
阅读更多...
网络安全/信息安全—学习笔记

网络安全/信息安全—学习笔记

一、网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面…
阅读更多...
【暑期每日一练】 day7

【暑期每日一练】 day7

目录 选择题 &#xff08;1&#xff09; 解析&#xff1a; &#xff08;2&#xff09; 解析&#xff1a; &#xff08;3&#xff09; 解析&#xff1a; &#xff08;4&#xff09; 解析&#xff1a; &#xff08;5&#xff09; 解析&#xff1a; 编程题 题一…
阅读更多...
​LeetCode解法汇总2500. 删除每行中的最大值

​LeetCode解法汇总2500. 删除每行中的最大值

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 给你一个 m x n 大小的矩阵 grid &#xff0c;由若干正整数组成。 执行下述操作…
阅读更多...
方差分析学习

方差分析学习

有时候能看的下去&#xff0c;有时候看书看不下去。 为了加深理解和记忆&#xff0c;先把基础的内容记忆一下。 组内方差&#xff08;误差平方和&#xff09;和组间方差&#xff08;效应平方和&#xff09;的定义&#xff1a; 注意&#xff1a;图中红线部分是一个整体。 误差…
阅读更多...
基于java SpringBoot和HTML的博客系统

基于java SpringBoot和HTML的博客系统

随着网络技术渗透到社会生活的各个方面&#xff0c;传统的交流方式也面临着变化。互联网是一个非常重要的方向。基于Web技术的网络考试系统可以在全球范围内使用互联网&#xff0c;可以在本地或异地进行通信&#xff0c;大大提高了通信和交换的灵活性。在当今高速发展的互联网时…
阅读更多...
Quartz实战：基于Quartz实现定时任务的动态调度，实现定时任务的增删改查

Quartz实战：基于Quartz实现定时任务的动态调度，实现定时任务的增删改查

文章目录 一、Quartz基础二、使用Quartz实现定时任务的动态调度1、使用Quartz-jobStore 持久化2、前端页面实现效果图3、自定义job表4、增删改查Controller5、Quartz工具类6、测试任务类7、springboot启动初始化定时任务8、自定义JobFactory&#xff0c;使Task注册为Bean9、省略…
阅读更多...
PoseiSwap 即将开启质押，利好刺激下 POSE通证短时涨超 30%

PoseiSwap 即将开启质押，利好刺激下 POSE通证短时涨超 30%

随着Nautilus Chain主网的上线&#xff0c;预示着Web3世界迎来全新的模块化、Layer3时代&#xff0c;为Web3世界与Web2世界的深入融合构建基础。而PoseiSwap作为Nautilus Chain上的首个DEX&#xff0c;也成为了加密行业首个以模块化为基础构建的DEX。 基于Nautilus Chain&#…
阅读更多...
免费商城搭建之java商城 开源java电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c 手机商城免费搭建

免费商城搭建之java商城 开源java电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c 手机商城免费搭建

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…
阅读更多...
【lesson6】gcc和动静态库介绍

【lesson6】gcc和动静态库介绍

文章目录 gcc介绍gcc使用gcc -Egcc -Sgcc -cgcc *.ogcc *.c一步到位翻译 动静态库介绍动态链接和静态链接动态链接静态链接动静态链接总结 gcc介绍 gcc是一款翻译器&#xff0c;专门用来翻译C语言文本的翻译器。 程序的翻译过程&#xff1a; 是C文本---->计算机二进制可执行…
阅读更多...
Qt5.14.2+VS2019配置MSVC2017

Qt5.14.2+VS2019配置MSVC2017

问题&#xff1a; The compiler " Microsoft Visual C Compiler 16 . 11 . 32106 . 194 ( amd64 x86 )( x86-windows-msvc2019-pe-32bit ) cannot produce code for the Qt version " Qt5.14.2 MSVC2017 64bit " ( x86-windows-msvc2017-pe-64bit 编译器“…
阅读更多...
Docker安装部署ShardingProxy详细教程

Docker安装部署ShardingProxy详细教程

&#x1f680; ShardingSphere &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023