当前位置： 首页 > news >正文

js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡

news 来源：原创 2025/7/19 18:25:09

js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡。实现过程使用元素的绝对定位，通过伪元素设置背景图片和文字，效果如下：

index.jsx：

import React, { useEffect, useState } from 'react'
import styles from './style.less'export default function index() {const handleClick = (floor) => {console.log(floor);}return (<div className={styles.container}><div className={styles.floor} onClick={() => handleClick(1)}></div><div className={styles.floor} onClick={() => handleClick(2)}></div></div>)
}

style.less：

.container {position: relative;width: 200px; /* 容器宽度 */height: 400px; /* 容器高度 */
}.floor {position: absolute;cursor: pointer;&.disabled{// 阻止元素响应鼠标/指针事件，用户无法点击、悬停或与元素进行任何交互pointer-events: none;&::after{opacity: .15;}}&::before{transform: scale(0.71);content: "";display: block;transition: all .3s;pointer-events: none;position: absolute;background-repeat: no-repeat;background-position: center;background-size: cover;}&::after{display: block;position: absolute;font-style: italic;font-size: 23px;color: #ff0000;right: -146px;font-weight: 100;}&:hover{&::after{color: #ffffff;font-size: 25px;}}&:nth-child(1){bottom: 0px;&::before{width: 300px;height: 160px;background: url(~@/assets/images/1.png) no-repeat center / 100% 100%;top: -65px;left: -10px;}&::after{content: "1F";height: 36px;line-height: 36px;}&:hover{&::before{// background-image: url(/images/1f-active.png);background-color: #a5fcc8;}}}&:nth-child(2){bottom: 73px;&::before{width: 300px;height: 160px;background: url(~@/assets/images/1.png) no-repeat center / 100% 100%;top: -65px;left: -10px;}&::after{content: "2F";height: 36px;line-height: 36px;}&:hover{&::before{// background-image: url(/images/2f-active.png);background-color: #a5fcc8;}}}
}

相关文章：

js实现2D图片堆叠在一起呈现为3D效果，类似大楼楼层的效果，点击每个楼层不会被其他楼层遮挡

js实现2D图片堆叠在一起呈现为3D效果&#xff0c;类似大楼楼层的效果&#xff0c;点击每个楼层不会被其他楼层遮挡。实现过程使用元素的绝对定位&#xff0c;通过伪元素设置背景图片和文字&#xff0c;效果如下&#xff1a; index.jsx&#xff1a; import React, { useEffect,…...

编程日记 2025/7/19 18:25:09

【安装部署】Linux下最简单的 pytorch3d 安装

最近接触一个项目需要用到 pytorch3d 库&#xff0c;找了好多眼花缭乱的资料&#xff0c;最后发现大道至简~ 1、查看 python&#xff0c;cuda&#xff0c;pytorch 的版本 source activate myMRI # 激活环境 python --version # python 版本查看 nvcc --version # cuda…...

编程日记 2025/6/29 9:38:17

【在阿里云或其他 CentOS/RHEL 系统上安装和配置 Dante SOCKS5 代理服务】

在阿里云或其他 CentOS/RHEL 系统上安装和配置 Dante SOCKS5 代理服务 什么是SOCKS5&#xff1f;前提条件步骤 1&#xff1a;安装 Dante SOCKS5 服务步骤 2&#xff1a;创建专用代理用户&#xff08;推荐&#xff09;步骤 3&#xff1a;配置 Dante 服务步骤 4&#xff1a;设置日…...

编程日记 2025/7/19 18:22:53

第十五讲、Isaaclab中在机器人上添加传感器

0 前言 官方教程&#xff1a;https://isaac-sim.github.io/IsaacLab/main/source/tutorials/04_sensors/add_sensors_on_robot.html IsaacsimIsaaclab安装&#xff1a;https://blog.csdn.net/m0_47719040/article/details/146389391?spm1001.2014.3001.5502 传感器有助于智能…...

编程日记 2025/7/15 15:42:49

网络设备智能巡检系统-MCP案例总结

一、案例背景与目标 背景： 企业网络中存在多厂商（华为、H3C、思科等）设备，传统巡检需人工逐台登录，效率低且易出错。 目标： 开发基于自然语言的智能巡检系统，实现： 自然语言指令解析多厂商设备自动化巡检结构化报告生成技术栈： Python + Ollama + Netmiko + FastAPI…...

编程日记 2025/7/19 18:22:52

力扣2685（dfs）

我们对每个连通块进行dfs&#xff0c;在深搜的过程中&#xff0c;定义两个变量v,e.其中v表示该连通图的节点数量&#xff0c;e表示该连通图中边的数量的两倍。为什么是两倍呢&#xff1f;因为我们针对某个节点进行dfs的过程中&#xff0c;我们让e加上这个节点所连边的数量&…...

编程日记 2025/6/29 9:38:16

火山引擎实时语音合成WebSocket V3协议Python实现demo

火山引擎语音整体特点 火山引擎(字节跳动旗下)的语音合成产品确实非常面向多媒体内容创作&#xff0c;特别是短视频、有声书和多人场景。 1. 音色多样性与场景细分 火山引擎提供了极其丰富的音色选择(100音色)&#xff0c;并按以下场景精细分类&#xff1a; 多情感音色&…...

编程日记 2025/7/19 18:22:54

Apache SeaTunnel：新一代开源、高性能数据集成工具

Apache SeaTunnel 是一款开源、分布式、高性能的数据集成工具&#xff0c;可以通过配置快速搭建数据管道&#xff0c;支持实时海量数据同步。 Apache SeaTunnel 专注于数据集成和数据同步&#xff0c;主要旨在解决数据集成领域的常见问题&#xff1a; 数据源多样性&#xff1a…...

编程日记 2025/6/29 9:38:05

【音视频】音频解码实战

音频解码过程 ⾳频解码过程如下图所示&#xff1a; FFmpeg流程 关键函数 关键函数说明&#xff1a; avcodec_find_decoder&#xff1a;根据指定的AVCodecID查找注册的解码器。av_parser_init&#xff1a;初始化AVCodecParserContext。avcodec_alloc_context3&#xff1a;为…...

编程日记 2025/7/14 15:26:49

学习思路分享---从0开始搭建基本web服务器

学习思路分享—从0开始搭建基本web服务器 为什么要搭建yum仓库? 下载系统软件,类似于应用商店,系统软件,podman,镜像,容器,镜像仓库,docker,集装箱, 作用&#xff1a;自动解决依赖关系 为什么要搭建web服务器? 提供网站 , nginx 第一步搭建yum仓库,本地离线仓库 挂载关盘驱动…...

编程日记 2025/7/18 21:27:11

开源模型应用落地-Podcastfy-从文本到声音的智能跃迁-Docker（二）

一、前言 在当今信息呈现方式越来越多样化的背景下&#xff0c;如何将文字、图片甚至视频高效转化为可听的音频体验&#xff0c;已经成为内容创作者、教育者和研究者们共同关注的重要话题。Podcastfy是一款基于Python的开源工具&#xff0c;它专注于将多种形式的内容智能转换成…...

编程日记 2025/6/29 9:36:22

docker 里面没有 wget 也 install 不了

docker 里面没有 wget 也 install 不了 如果你在Docker容器中发现没有安装wget工具&#xff0c;并且无法通过常规方法安装它&#xff0c;这通常是因为容器的基础镜像中缺少包管理工具&#xff0c;或者包源配置不正确。以下是一些可能的解决方案&#xff1a; 使用包管理工具安…...

编程日记 2025/7/3 12:51:49

【无人机】问题分析。查看电机转速时，四个电机转速不一致，QGC中检测到电机转速不均衡

1、问题描述 在组装完成无人机后&#xff0c;对无人机的电机进行测试 在MAVLink Inspector一栏中&#xff0c;点击SERVO_OUTPUT_RAW可以查看飞控输出的PWM信号。 无人机解锁&#xff08;Armed&#xff09;后&#xff0c;按照油门大小servo1/2/3/4_raw的值域为1000-2000&…...

编程日记 2025/7/19 18:24:05

Docker Compose常用命令

Docker Compose常用命令 安装docker-comosedocker-compose配置文件及常用指令yaml 文件级docker-compose.yml配置文件示例 docker compose常用命令启动服务停止服务重启服务查看运行容器列表查看服务日志构建镜像docker-compose rm删除 安装docker-comose # 声明版本 VER2.35.…...

编程日记 2025/7/19 18:24:05

生产环境大数据平台权限管理

引言&#xff1a;数据资产保护的生死线 在金融行业某头部企业发生的数据泄露事件中&#xff0c;由于权限管理漏洞导致千万级用户信息外泄&#xff0c;直接经济损失超过2.3亿元。这个案例揭示了生产环境大数据平台权限管理的重要性和复杂性。本文将深入探讨从权限模型设计到实施…...

编程日记 2025/7/11 7:22:24

【连载6】基础智能体的进展与挑战综述-奖励

基础智能体的进展与挑战综述 从类脑智能到具备可进化性、协作性和安全性的系统 【翻译团队】刘军(liujunbupt.edu.cn) 钱雨欣玥 冯梓哲 李正博 李冠谕 朱宇晗 张霄天 孙大壮 黄若溪 5. 奖励 奖励机制帮助智能体区分有益与有害的行为&#xff0c;塑造其学习过程并影响其决策…...

编程日记 2025/7/9 16:09:46

什么是CRM系统，它的作用是什么？CRM全面指南

CRM&#xff08;Customer Relationship Management&#xff0c;客户关系管理&#xff09;系统是一种专门用于集中管理客户信息、优化销售流程、提升客户满意度、支持精准营销、驱动数据分析决策、加强跨部门协同、提升客户生命周期价值的业务系统工具。其中&#xff0c;优化销售…...

编程日记 2025/6/29 9:36:37

【AI提示词】投资策略专家

提示说明 投资策略专家致力于帮助用户构建和优化投资组合&#xff0c;实现资产增值。专家通过深入分析市场趋势、经济数据和公司基本面&#xff0c;为用户制定符合其投资目标和风险偏好的策略。 提示词 # 角色 投资策略专家## 注意 1. 投资策略专家需要具备深入分析市场的能…...

编程日记 2025/6/29 10:34:00

川翔云电脑32G大显存集群机器上线！

川翔云电脑今日重磅推出32G 大显存机型&#xff0c;为游戏玩家、设计师、AI 开发者等提供极致云端算力体验&#xff01; 一、两大核心配置&#xff0c;突破性能天花板 ✅ 32G 超大显存机型 行业领先&#xff1a;搭载 NVIDIA 专业显卡&#xff0c;单卡可分配 32G 独立显存&am…...

编程日记 2025/6/29 10:38:14

最新扣子(Coze)案例教程：飞书多维表格按条件筛选记录 + 读取分页Coze工作流，无限循环使用方法，手把手教学，完全免费教程

大家好&#xff0c;我是斜杠君。 &#x1f468;‍&#x1f4bb; 星球群里有同学想学习一下飞书多维表格的使用方法&#xff0c;关于如何通过按条件筛选飞书多维表格中的记录&#xff0c;以及如何使用分页解决最多一次只能读取500条的限制问题。 斜杠君今天就带大家一起搭建一…...

编程日记 2025/7/14 9:42:34

ProxySQL 的性能优化需结合实时监控数据与动态配置调整

ProxySQL 的性能优化需结合实时监控数据与动态配置调整，具体操作如下： 一、‌性能监控实现‌ 内置监控模块配置‌ 启用监控用户‌：在 global_variables 表中设置监控账号，用于检测节点健康状态： sql UPDATE global_variables SET variable_value=‘monitor’ WHERE va…...

编程日记 2025/6/29 9:36:40

前端框架的“快闪“时代：我们该如何应对技术迭代的洪流？

引言&#xff1a;前端开发者的"框架疲劳" “上周刚学完Vue 3的组合式API&#xff0c;这周SolidJS又火了&#xff1f;”——这恐怕是许多前端开发者2023年的真实心声。前端框架的迭代速度已经达到了令人目眩的程度&#xff0c;GitHub每日都有新框架诞生&#xff0c;n…...

编程日记 2025/6/29 9:36:36

准确--Tomcat更换证书

具体意思是&#xff1a; Starting Coyote HTTP/1.1 on http-8080: HTTP 连接器&#xff08;端口 8080&#xff09;启动成功了。严重: Failed to load keystore type PKCS12 with path conf/jlksearch.fzsmk.cn.pfx due to failed to decrypt safe contents entry: javax.crypt…...

编程日记 2025/6/29 10:10:11

数据库对象与权限管理-Oracle数据字典详解

1. 数据字典概念讲解 Oracle数据字典是数据库的核心组件&#xff0c;它存储了关于数据库结构、用户信息、权限设置和系统性能等重要的元数据信息。这些信息对于数据库的日常管理和维护至关重要。数据字典在数据库创建时自动生成&#xff0c;并随着数据库的运行不断更新。 数据…...

编程日记 2025/6/29 11:25:49

黑阈免激活版：智能管理后台，优化手机性能

在使用安卓手机的过程中&#xff0c;许多用户会遇到手机卡顿、电池续航不足等问题。这些问题通常是由于后台运行的应用程序过多&#xff0c;占用大量系统资源导致的。今天&#xff0c;我们要介绍的 黑阈免激活版&#xff0c;就是这样一款由南京简域网络科技工作室开发的手机辅助…...

编程日记 2025/6/29 11:46:39

C# foreach 循环中获取索引的完整方案

一、手动维护索引变量 ‌实现方式‌&#xff1a; 在循环外部声明索引变量&#xff0c;每次迭代手动递增&#xff1a; int index 0; foreach (var item in collection) { Console.WriteLine($"{index}: {item}"); index; } ‌特点‌&#xff1a; 简单直接&#…...

编程日记 2025/6/29 11:46:30

刷题之路：C++ 解题分享与技术总结

目录 引言 ###刷题实战 &#xff08;一&#xff09;移除数组中的重复元素 &#xff08;二&#xff09;数组中出现次数超过一半的数字 &#xff08;三&#xff09;杨辉三角 &#xff08;四&#xff09;只出现一次的数字 &#xff08;五&#xff09;找出数组中两个只出现一…...

编程日记 2025/6/29 9:38:34

深入探讨：如何完美完成标签分类任务（数据治理中分类分级的分类思考）

文章目录 一、标签分类的核心价值与挑战1.1 标签分类的战略意义1.2 标签分类面临的主要挑战 二、标签分类方法论的系统设计2.1 多层级标签架构设计2.2 精准的标签匹配技术2.3 混合优化策略 三、标签分类的技术实现3.1 高维向量空间中的标签表示3.2 图数据库驱动的标签关系处理3…...

编程日记 2025/6/29 12:18:04

【解决 el-table 树形数据更新后视图不刷新的问题】

内容包含deepseek自动生成内容。第一种亲测可行。 本文章仅用于问题记录 解决 el-table 树形数据更新后视图不刷新的问题 在 Element Plus 的 el-table 中使用树形数据时&#xff0c;当数据更新后视图不自动刷新是一个常见问题。以下是几种解决方案&#xff1a; 问题原因 e…...

编程日记 2025/7/17 18:20:22

MuJoCo中的机器人状态获取

UR5e机器人xml文件模型 <mujoco model"ur5e"><compiler angle"radian" meshdir"assets" autolimits"true"/><option integrator"implicitfast"/><default><default class"ur5e">&…...

编程日记 2025/6/29 10:56:18

第五篇：linux之vim编辑器、用户相关

第五篇&#xff1a;linux之vim编辑器、用户相关 文章目录 第五篇&#xff1a;linux之vim编辑器、用户相关一、vim编辑器1、什么是vim&#xff1f;2、为什么要使用vim&#xff1f;3、vi和vim有什么区别&#xff1f;4、vim编辑器三种模式 二、用户相关1、什么是用户&#xff1f;2…...

编程日记 2025/6/29 11:30:37

taobao.trades.sold.get(淘宝店铺订单接口）

淘宝店铺提供了多种订单接口&#xff0c;可以用来获取订单信息、创建订单、修改订单等操作。 获取订单列表接口&#xff1a;可以使用该接口获取店铺的订单列表&#xff0c;包括订单号、买家信息、订单状态等。 获取单个订单信息接口&#xff1a;可以使用该接口获取指定订单的详…...

编程日记 2025/7/11 15:43:40

媒体发稿攻略，解锁新闻发稿成长新高度

新闻媒体发稿全攻略! 如何快速上稿主流权威央级媒体? 大家好!今天来聊聊媒体发稿的那些事儿&#xff0c;希望能帮到正在发稿或者准备发稿的小伙伴们。 ①明确目标媒体 首先&#xff0c;得搞清楚你要把稿子发给哪些媒体和。这一步非常关键&#xff0c;因为选择适合的媒体是发…...

编程日记 2025/6/29 12:12:11

WebRTC服务器Coturn服务器部署

1、概述 作为WebRTC服务器&#xff0c;只需要部署开源的coturn即可&#xff0c;coturn同时实现了STUN和TURN的协议 2、Coturn具体部署 2.1 Coturn简介 coturn是一个开源的STUN/TURN服务器&#xff0c;把STUN服务器跟TURN服务器都整合为一个服务器&#xff0c;主要提供一下几个功…...

编程日记 2025/6/29 10:24:27

lspci的资料

PCI即Peripheral Component Interconnect。 在 Linux 上使用 lspci 命令查看硬件情况 | Linux 中国 lspci 命令用于显示连接到 PCI 总线的所有设备&#xff0c;从而满足上述需求。该命令由 pciutils 包提供&#xff0c;可用于各种基于 Linux 和 BSD 的操作系统。 使用 lspci 和…...

编程日记 2025/6/29 9:36:29

GitLab 提交权限校验脚本

.git/hooks 目录详解与配置指南 一、什么是 .git/hooks&#xff1f; .git/hooks 是 Git 仓库中一个隐藏目录&#xff0c;用于存放 钩子脚本&#xff08;Hook Scripts&#xff09;。这些脚本会在 Git 执行特定操作&#xff08;如提交、推送、合并&#xff09;的前/后自动触发&…...

编程日记 2025/7/17 16:21:13

WebRTC服务器Coturn服务器相关测试工具

1、概述 在安装开源的webrtc服务器coturn服务器后&#xff0c;会附带安装coturn的相关工具&#xff0c;主要有以下几种工具 2、turnadmin工具 说明&#xff1a;服务器命令行工具&#xff0c;提供添加用户、添加管理员、生成TURN密钥等功能&#xff0c;turnadmin -h查看详细用…...

编程日记 2025/7/19 16:24:02

基于Python+Pytest实现自动化测试（全栈实战指南）

目录 第一篇&#xff1a;基础篇 第1章 自动化测试概述 1.1 什么是自动化测试 第2章 环境搭建与工具链配置 2.1 Python环境安装&#xff08;Windows/macOS/Linux&#xff09; 2.2 虚拟环境管理 2.3 Pytest基础配置&#xff08;pytest.ini&#xff09; 第3章 Pytest核心语…...

编程日记 2025/7/13 18:25:35

符号速率估计——小波变换法

[TOC]符号速率估计——小波变换法 一、原理 1.Haar小波变换 小波变换在信号处理领域被成为数学显微镜&#xff0c;不同于傅里叶变换&#xff0c;小波变换可以观测信号随时间变换的频谱特征&#xff0c;因此&#xff0c;常用于时频分析。   当小波变换前后位置处于同一个码元…...

编程日记 2025/7/18 9:16:06

SQLMesh隔离系统深度实践指南：动态模式映射与跨环境计算复用

在数据安全与开发效率的双重压力下&#xff0c;SQLMesh通过动态模式映射、跨环境计算复用和元数据隔离机制三大核心技术&#xff0c;完美解决了生产与非生产环境的数据壁垒问题。本文提供从环境配置到生产部署的完整实施框架&#xff0c;助您构建安全、高效、可扩展的数据工程体…...

编程日记 2025/6/29 11:26:30

调整IntelliJ IDEA中当前文件所在目录的显示位置

文章目录 1. 问题呈现2. 调整方法3. 更改后的界面 更多 IntelliJ IDEA 的使用技巧可查看 IntelliJ IDEA 专栏中的文章&#xff1a; IntelliJ IDEA 1. 问题呈现 在 IntelliJ IDEA 中&#xff0c;我们在浏览某个文件时&#xff0c;文件所在的目录会显示在下方的状态栏中&#x…...

编程日记 2025/7/9 10:49:26

关于ubuntu密码正确但是无法登录的情况

参考这个文章&#xff1a; https://blog.csdn.net/cuichongxin/article/details/117462494 检查一下是不是用户被lock了 输入passwd -s username 如果用户是L状态&#xff0c;那么就是lock了。 使用 passwd -u username 解锁 关于 .bashrc 不生效 有几点&#xff1a; ~/.…...

编程日记 2025/7/10 18:33:14

OpenCV中的透视变换方法详解

文章目录 引言1. 什么是透视变换2. 透视变换的数学原理3. OpenCV中的透视变换代码实现3.1 首先定义四个函数 3.1.1 cv_show() 函数 3.1.2 def resize() 函数 3.1.3 order_points() 函数 3.1.4 four_point_transform() 函数 3.2 读取图片并做预处理3.3 轮廓检测3.4 获取最大…...

编程日记 2025/6/29 11:34:46

基于DeepSeek的网络爬虫技术创新与实践应用

摘要 在人工智能迅猛发展的时代背景下&#xff0c;网络爬虫技术正经历着深刻变革。本文聚焦于融合DeepSeek大模型的开源爬虫框架Crawl4AI&#xff0c;深入探讨其在网络数据抓取与分析领域的技术原理、功能特性、应用实践及未来发展趋势。通过对Crawl4AI的异步操作、动态内容处理…...

编程日记 2025/7/18 21:35:02

Python基于语音识别的智能垃圾分类系统【附源码、文档说明】

博主介绍&#xff1a;✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…...

编程日记 2025/6/29 9:36:41

关于RPC

1.什么是RPC RPC&#xff08;Remote Procedure Call&#xff09;&#xff0c;即远程过程调用&#xff08;协议&#xff09;。它允许像调用本地服务一样调用远程服务&#xff0c;用于实现分布式系统中跨网络进行通信 的技术&#xff0c;是一种计算机通信协议。 RPC是一种服务器…...

编程日记 2025/7/19 17:00:21

前端频繁调用后端接口问题思考

针对前端频繁调用后端接口的问题&#xff0c;以下是一套分步解决方案&#xff0c;结合Java后端技术栈&#xff1a; 1. 实时数据场景&#xff1a;WebSocket/SSE 适用场景&#xff1a;实时股票行情、即时聊天、监控仪表盘 // Spring WebSocket 配置示例 Configuration EnableW…...

编程日记 2025/6/29 9:36:34

Mujoco robosuite 机器人模型

import ctypes import os# 获取当前脚本所在的目录 script_dir os.path.dirname(os.path.abspath(__file__))# 构建库文件的相对路径 lib_relative_path os.path.join(dynamic_models, UR5e, Jb.so)# 拼接成完整的路径 lib_path os.path.join(script_dir, lib_relative_path…...

编程日记 2025/6/29 9:36:50

进阶篇 第 7 篇 (终章)：融会贯通 - 多变量、模型选择与未来之路

进阶篇 第 7 篇 (终章)&#xff1a;融会贯通 - 多变量、模型选择与未来之路 (图片来源: Pixabay on Pexels) 我们已经一起走过了时间序列分析的进阶之旅&#xff01;从深入经典统计模型 ETS、ARIMA、SARIMA&#xff0c;到探索现代利器 Prophet&#xff0c;再到拥抱机器学习和初…...

编程日记 2025/6/29 10:18:42

网络安全·第五天·TCP协议安全分析

一、传输层协议概述 1、功能 传输层负责建立端到端的连接&#xff0c;即应用进程之间的通信&#xff0c;负责数据在端到端之间的传输。与网络层不同的是&#xff0c;网络层负责主机与主机之间的通信。 同时&#xff0c;传输层还要对收到的报文进行差错检测&#xff08;首部和…...

编程日记 2025/7/18 16:46:13