使用 CSS 实现多立方体悬停颜色效果实现

使用 CSS 实现多立方体悬停效果实现

效果展示

在这里插入图片描述

CSS 知识点

  • filter 属性的 hue-rotate 值运用
  • 使用 CSS 实现立方体

场景布局分析

从效果图可以看出,要实现 3*3 的立方体集合,我们需要考虑一下怎么安排小立方体的布局。我这里的做法是使用span实现单个小立方体,而用一个div元素来状态一列 3 个小立方体,这样就形成一列,然后再找一个div元素来装载 3 列立法体形成大立方体的一个面,形成整体布局后使用transform属性实现立体效果。具体布局如下:

在这里插入图片描述

整体页面布局

<!-- 整体容器,整体控制布局 -->
<div class="container"><!-- 3*3 大立方体的一个面,这里只是展示一个面,两外两个面可以直接复制一样的代码形成另外一个面 --><div class="cube"><!-- 状态3个小立方体的一例容器 --><div style="--x: -1;--y:0"><!-- 小立方体 --><span style="--i:3"></span><span style="--i:2"></span><span style="--i:1"></span></div><div style="--x: 0;--y:0"><span style="--i:3"></span><span style="--i:2"></span><span style="--i:1"></span></div><div style="--x: 1;--y:0"><span style="--i:3"></span><span style="--i:2"></span><span style="--i:1"></span></div></div>
</div>

实现单个立方体

1. 形成小立方体的基础布局

.container .cube {position: relative;z-index: 2;
}.container .cube div {position: absolute;display: flex;flex-direction: column;
}.container .cube div span {position: relative;display: inline-block;width: 50px;height: 50px;background: #dcdcdc;z-index: calc(1 * var(--i));transition: 1.5s;
}/* 立方体左侧面 */
.container .cube div span::before {content: "";position: absolute;left: -40px;width: 40px;height: 100%;background: #fff;transform-origin: right;
}/* 立方体上侧面 */
.container .cube div span::after {content: "";position: absolute;top: -40px;left: 0;width: 100%;height: 40px;background: #f2f2f2;transform-origin: bottom;
}

实现上述代码后效果如下:

在这里插入图片描述

2. 使用 transform 属性形成基础立体效果

.container {position: relative;top: -80px;transform: skewY(-20deg);
}

实现上述代码后的效果如下:

在这里插入图片描述

3. 使用 transform 属性实现立方体

在上述代码的基础上,修改成如下的代码:

.container .cube div span::before {content: "";position: absolute;left: -40px;width: 40px;height: 100%;background: #fff;transform-origin: right;transform: skewY(45deg);transition: 1.5s;
}.container .cube div span::after {content: "";position: absolute;top: -40px;left: 0;width: 100%;height: 40px;background: #f2f2f2;transform-origin: bottom;transform: skewX(45deg);transition: 1.5s;
}

最终实现效果如下:

在这里插入图片描述

实现一列立方体

有了单个立方体后实现一列立方体就方便实现。具体代码如下:

.container .cube div {position: absolute;display: flex;flex-direction: column;gap: 30px;
}

实现上述代码后,页面效果如下:

在这里插入图片描述

实现大立方体的一个面

形成一列效果后,我们使用translate和 css 变量实现完成立方体的一个面。具体代码如下:

.container .cube div {position: absolute;display: flex;flex-direction: column;gap: 30px;translate: calc(-70px * var(--x)) calc(-60px * var(--y));
}

实现上述代码后,页面效果如下:

在这里插入图片描述

实现 3*3 的大立方体

实现了一个面后,我们实现大立方体就很简单,只要使用translate来修改其他面的位置就可以,具体代码如下:

.container .cube:nth-child(2) {z-index: 1;translate: -60px -60px;
}.container .cube:nth-child(3) {z-index: 3;translate: 60px 60px;
}

实现上述代码后,页面效果如下:

在这里插入图片描述

实现立方体属性悬停效果

整体布局实现后,我们就可以在小立方体上添加对应的鼠标移动样式,具体的代码如下:

.container .cube div span:hover {transition: 0s;background: #ef4149;filter: drop-shadow(0 0 30px #ef4149);
}.container .cube div span:hover::before {transition: 0s;background: #f75d64;
}.container .cube div span:hover::after {transition: 0s;background: #f75d64;
}

实现上述代码后,页面效果如下:

在这里插入图片描述

使用动画实现立方体多种颜色变化

.container {position: relative;top: -80px;transform: skewY(-20deg);/* 总容器来控制小立体的颜色变化 */animation: animate 5s linear infinite;
}@keyframes animate {0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}
}

完整代码下载

完整代码下载

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS(四)---【链接美化、浮动布局、三种定位】

零.前言 本篇主要讲解<a>标签链接美化、页面的浮动布局&#xff0c;以及“相对定位”、“绝对定位”、“固定定位”三种定位。 关于其它请查看作者其它文章&#xff1a; CSS(一)---【CSS简介、导入方式、八种选择器、优先级】-CSDN博客 CSS(二)---【常见属性、复合属…

Java常用Lambda表达式与Stream流应用

定义&#xff1a; Lambda表达式是一种在编程语言中表示匿名函数的方法。它可以在需要函数作为参数的地方使用&#xff0c;并且可以简洁地表示一个函数的定义。Lambda表达式最初由函数式编程语言引入&#xff0c;但现在已经成为许多编程语言中的常见特性。 基本语法&#xff1a;…

多路选择器选型参数,结构原理,工艺与注意问题总结

🏡《总目录》 目录 1,概述2,工作原理3,结构特点3.1,输入和输出端口3.2,控制端3.3,逻辑功能4,工艺流程4.1,设计阶段4.2,仿真验证4.3,制版4.4,制造4.5,测试与封装4.6,应用与测试

苹果设备下载海外app可能的方法

因为需要安装国外的APP&#xff0c;而且不是整天捣鼓这类东西&#xff0c;所以有点缩手缩脚&#xff0c;生怕引起严重后果&#xff0c;在此记录解决的方法和网上的一些分享。 在苹果电脑上的方法 在电脑上添加一个新的用户&#xff0c;然后给这个用户加一个海外Apple ID&…

【OceanBase实战之路】第3篇:多租户架构实现资源隔离

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 一、什么是OceanBase的多租户二、兼容模式2.1 MySQL 模式2.2 Oracle 模式三、租户介绍3.1 系统租户3.2 用户租户3.3 Meta 租…

数据结构--合并区间

数据结构–合并区间 分析 首先需要对整个二维数组的每一个区间的第一列&#xff08;左端&#xff09;进行升序&#xff0c;然后因为合并之后的的区间个数不确定&#xff0c;所以使用ArrayList&#xff0c;然后创建一个临时变量为第一个区间&#xff0c;然后比较其第二列&…

Artplayer视频JSON解析播放器源码|支持弹幕|json数据模式

全开源Artplayer播放器视频解析源码&#xff0c;支持两种返回模式&#xff1a;网页播放模式、json数据模式&#xff0c;json数据模式支持限制ip每分钟访问次数UA限制key密钥&#xff0c;也可理解为防盗链 &#xff0c;本播放器带弹幕库。 运行环境 推荐使用PHP8.0 redis扩展…

2024世界技能大赛某省选拔赛“网络安全项目”B模块--应急响应解析

广东省第三届职业技能大赛“网络安全项目”B模块任务书 PS: 关注鱼影安全第一部分 网络安全事件响应任务 1:应急响应第二部分 数字取证调查第三部分 应用程序安全:需要环境可以私信博主~PS: 关注鱼影安全 模块 B 竞赛项目试题 本文件为:2024世界技能大赛某省选拔赛-模块 B …

您的计算机已被.360勒索病毒感染?恢复您的数据的方法在这里!

尊敬的读者&#xff1a; 在数字化浪潮中&#xff0c;网络安全问题如暗流涌动&#xff0c;其中.360勒索病毒凭借其独特的攻击方式和难以捉摸的传播路径&#xff0c;成为了网络安全领域的一股“暗黑势力”。本文将带您深入剖析.halo勒索病毒的神秘面纱&#xff0c;并分享一系列独…

【跟着GPT4学JAVA】异常篇

JAVA异常中的知识点 问&#xff1a; 介绍下JAVA中的异常有哪些知识点吧 答&#xff1a; Java中的异常处理是一个重要的知识点&#xff0c;主要包括以下内容: 异常体系&#xff1a;Java的异常类是Throwable类派生出来的&#xff0c;Throwable下有两个重要的子类&#xff1a;Err…

「Android高级工程师」BAT大厂面试基础题集合-下-Github标星6-5K

C、 com.android.provider.contact D、 com.android.provider.contacts 11.下面关于ContentProvider描述错误的是&#xff08;&#xff09;。 A、 ContentProvider可以暴露数据 B、 ContentProvider用于实现跨程序共享数据 C、 ContentProvider不是四大组件 D、 ContentP…

基于SSM大学生健康管理系统的设计与实现

基于SSM大学生健康管理系统的设计与实现 获取源码——》哔站搜&#xff1a;计算机专业毕设大全 获取源码——》哔站搜&#xff1a;计算机专业毕设大全 源码获取——》可以私信

Spring IoCDI(3)

DI详解 接下来学习一下依赖注入DI的细节. 依赖注入是一个过程, 是指IoC容器在创建Bean时, 去提供运行时所依赖的资源, 而资源指的就是对象. 在之前的案例中, 使用了Autowired这个注解, 完成了依赖注入这个操作. 简单来说, 就是把对象取出来放到某个类的属性中. 在一些文章中…

宠物领养(源码+文档)

宠物领养管理系统&#xff08;小程序、ios、安卓都可部署&#xff09; 文件包含内容程序简要说明含有功能项目截图客户端主页举报页注册页领养详细发布寻宠/送养领养页 管理端送养管理用户管理科普管理签到管理 文件包含内容 1、搭建视频 2、流程图 3、开题报告 4、数据库 5、…

CVPR 2024 | 风格迁移和人像生成汇总!扩散模型diffusion用于经典AIGC方向

风格迁移 1、DEADiff: An Efficient Stylization Diffusion Model with Disentangled Representations 基于文本到图像扩散模型在迁移参考风格方面具有巨大潜力。然而&#xff0c;当前基于编码器的方法在迁移风格时显著损害了文本到图像模型的文本可控性。本文提出DEADiff来解决…

【Java】HashMap的简单使用(含小部分源码,get报错问题)

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 一、HashMap的特点 二、HashMap的一些常用方法 ①.put(K key, V value) 将键&#xff08;key&#xff09;/值&#xff08;value&#xff09;映射存放到Map集合中&#xff08;HashMap的key值不可重复&#xff0c;如果已…

2024蓝旭春季第二次前端培训课

目录 CSS伪类与伪元素 伪类 伪元素 关系选择器 分类举例 后代选择器 子元素选择器 相邻兄弟选择器 通用兄弟选择器 作用使用场景 后代选择器&#xff08;空格&#xff09; 子元素选择器 (>) 相邻兄弟选择器 () 通用兄弟选择器 (~) 随机提问 CSS布局 基础布局…

[数据集][目标检测]道路行人车辆坑洞锥形桶检测数据集VOC+YOLO格式6275张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6275 标注数量(xml文件个数)&#xff1a;6275 标注数量(txt文件个数)&#xff1a;6275 标注…

Python 基础:标准库 -- math (数学函数)

1. 官方文档 math --- 数学函数 — Python 3.12.2 文档 cmath --- 关于复数的数学函数 — Python 3.12.2 文档 Python 中&#xff0c;可以使用内置的数学运算符&#xff0c;例如加法 ()、减法 (-)、除法 (/) 和乘法 (*) 进行简单的数学运算。不过&#xff0c;更高级的运算&a…

SQLite版本3中的文件锁定和并发(七)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;自己编译SQLite或将SQLite移植到新的操作系统&#xff08;六&#xff09; 下一篇&#xff1a;SQLite—系列文章目录 正文&#xff1a; 1.0 SQLite 版本 3 中的文件锁定和并发 SQLite 版本 3.0.0 引入了新的锁…