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

发光立方体效果 html+css

news 文章来源：https://blog.csdn.net/luo1831251387/article/details/129364462 2025/5/22 22:12:46

一.话不多，看效果

在这里插入图片描述
css简单创意特效，关注我看更多简单创意特效~

二.实现（附完整代码）

  1. 定义标签：
<div class="container"><div class="q1"></div><div class="h2"></div><div class="z3"></div><div class="y4"></div><div class="s5"></div><div class="x6"></div></div>

2.定义外层盒子css：

 * {padding: 0;margin: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: black;}.container {position: relative;width: 300px;height: 300px;transform-style: preserve-3d;animation: zuan 6s linear alternate infinite;}@keyframes zuan {0% {transform: rotateX(-30deg) rotateY(0deg);}100% {transform: rotateX(-30deg) rotateY(360deg);}}

transform-style 让转换的子元素保留3D转换
animation 开启动画

不了解3D的可以看我的这篇文章：
3D立体相册 html+css 的基础版。

3.定义盒子6个面分别的样式：

 .q1,.h2,.z3,.y4 {position: absolute;width: 100%;height: 100%;/* opacity: 0.8; *//*   border-left: solid 1px rgba(9, 255, 9, 1); */background-image: linear-gradient(rgb(26, 26, 26), rgb(9, 255, 9));}.q1 {transform: translateZ(150px);}.h2 {transform: rotateY(180deg) translateZ(150px);}.z3 {transform: rotateY(-90deg) translateZ(150px);}.y4 {transform: rotateY(90deg) translateZ(150px);}.s5,.x6 {position: absolute;width: 100%;height: 100%;}.s5 {transform: rotateX(90deg) translateZ(150px);background-color: rgb(26, 26, 26);}.x6 {background-color: rgb(9, 255, 9);transform: rotateX(-90deg) translateZ(250px);box-shadow: 0 0 150px 30px rgb(9, 255, 9);filter: blur(30px);}

完整代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: black;}.container {position: relative;width: 300px;height: 300px;transform-style: preserve-3d;animation: zuan 6s linear alternate infinite;}@keyframes zuan {0% {transform: rotateX(-30deg) rotateY(0deg);}100% {transform: rotateX(-30deg) rotateY(360deg);}}.q1,.h2,.z3,.y4 {position: absolute;width: 100%;height: 100%;/* opacity: 0.8; *//*   border-left: solid 1px rgba(9, 255, 9, 1); */background-image: linear-gradient(rgb(26, 26, 26), rgb(9, 255, 9));}.q1 {transform: translateZ(150px);}.h2 {transform: rotateY(180deg) translateZ(150px);}.z3 {transform: rotateY(-90deg) translateZ(150px);}.y4 {transform: rotateY(90deg) translateZ(150px);}.s5,.x6 {position: absolute;width: 100%;height: 100%;}.s5 {transform: rotateX(90deg) translateZ(150px);background-color: rgb(26, 26, 26);}.x6 {background-color: rgb(9, 255, 9);transform: rotateX(-90deg) translateZ(250px);box-shadow: 0 0 150px 30px rgb(9, 255, 9);filter: blur(30px);}</style></head><body><div class="container"><div class="q1"></div><div class="h2"></div><div class="z3"></div><div class="y4"></div><div class="s5"></div><div class="x6"></div></div></body>
</html>

三.总结

886~

我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~

相关文章：

发光立方体效果 html+css

一.话不多&#xff0c;看效果 css简单创意特效&#xff0c;关注我看更多简单创意特效~ 二.实现&#xff08;附完整代码&#xff09; 定义标签&#xff1a; <div class"container"><div class"q1"></div><div class"h2"&…...

编程日记 2023/3/20 6:33:12

READ: Large-Scale Neural Scene Rendering for Autonomous Driving

READ: Large-Scale Neural Scene Rendering for Autonomous Driving &#xff1a;面向自动驾驶的大规模神经场景绘制 门卷积 https://www.jianshu.com/p/09fc8490104d https://blog.csdn.net/weixin_44996354/article/details/117409438摘要&#xff1a;论文提出了一种大规模神…...

编程日记 2023/3/20 6:28:11

Linux环境C语言开发基础

C语言是一门面向过程的计算机编程语言&#xff0c;与C、C#、Java等面向对象编程语言有所不同。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、仅产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。C语言诞生于美国的贝尔实验室&#xff0c;由丹…...

编程日记 2023/3/20 6:23:09

string类(上)

string类&#xff08;上&#xff09;1.标准库中的string类2.string类对象的常见构造①string()②string(const char* s)③string(size_t n,char c)④string(const string&s)⑤string(const string& str,size_t pos,size_t lennpos)⑥string&#xff08;const char* s,s…...

编程日记 2023/3/20 6:18:06

ElasticSearch快速入门详解（亲测好用，强烈推荐收藏）

3.快速入门 接下来快速看下elasticsearch的使用 3.1.概念 Elasticsearch虽然是一种NoSql库&#xff0c;但最终的目的是存储数据、检索数据。因此很多概念与MySQL类似的。 ES中的概念数据库概念说明索引库&#xff08;indices)数据库&#xff08;Database&#xff09;ES中可…...

编程日记 2023/3/20 6:13:04

出入了解——Vue.js

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。座右铭&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石&#xff0c;故能成其高。个人主页&#xff1a;小李会科技的…...

编程日记 2023/3/20 6:08:03

MySQL8 双主(主主)架构部署实战

前言 大家好&#xff0c;我是 沐风晓月 本文收录于《数据库入门到精通系列》专栏&#xff0c; 更多内容可以关注我的csdn博客。 本文主要讲解MySQL主主架构实战,在开始之前需要根据下面的提示来配置环境&#xff1a; Linux基础命令不熟参考&#xff1a; 《linux基本功-基础…...

编程日记 2023/3/20 6:02:59

【数据结构】第三站：单链表

目录 一、顺序表的缺陷 二、链表 1.链表的概念以及结构 2.链表的分类 3.单链表的逻辑结构与物理结构 三、单链表的实现 1.单链表的定义 2.单链表的接口定义 3.单链表的接口实现 四、单链表的实现完整代码 一、顺序表的缺陷 在上一篇文章中&#xff0c;我们了解了顺序…...

编程日记 2023/3/20 5:57:57

【蓝桥杯2020】七段码

【题目描述】 七段码 HUSTOJ 题目导出文件 [蓝桥杯2020] 第十一届蓝桥杯第二次省赛—填空题E题 七段码 小蓝要用七段码数码管来表示一种特殊的文字。 上图给出了七段码数码管的一个图示&#xff0c;数码管中一共有 7 段可以发光的二 极管&#xff0c;分别标记为 a, b, c,…...

编程日记 2023/3/20 5:52:56

Spark读取JDBC调优

Spark读取JDBC调优&#xff0c;如何调参一、场景构建二、参数设置1.灵活运用分区列实际问题&#xff1a;工作中需要读取一个存放了三四年历史数据的pg数仓表&#xff08;缺少主键id&#xff09;&#xff0c;需要将数据同步到阿里云 MC中&#xff0c;Spark在使用JDBC读取关系型数…...

编程日记 2023/3/20 5:47:53

【文心一言】什么是文心一言，如何获得内测和使用方法。

文心一言什么是文心一言怎么获得内测资格接下来就给大家展示一下文学创作商业文案创作数理逻辑推算中文理解多模态生成用python写一个九九乘法表写古诗前言&#xff1a; &#x1f3e0;个人主页&#xff1a;以山河作礼。 &#x1f4dd;​&#x1f4dd;:本文章是帮助大家了解文心…...

编程日记 2023/3/20 5:42:50

CentOS8服务篇10：FTP服务器配置与管理

一、安装与启动FTP服务器 1、安装VSFTP服务器所需要的安装包 #yum -y install vsftpd 2、查看配置文件参数 Vim /etc/vsftpd/vsftpd.conf &#xff08;1&#xff09;是否允许匿名登录 anonymous_enableYES 该行用于控制是否允许匿名用户登录。 &#xff08;2&…...

编程日记 2023/3/20 5:37:49

笔试强训3.14

一、选择题 1.以下说法错误的是&#xff08;C&#xff09; A.数组是一个对象 B.数组不是一种原生类 C.数组的大小可以任意改变 D.在Java中&#xff0c;数组存储在堆中连续内存空间里 ​ 相关知识点&#xff1a;原生/内置数组是那八个&#xff0c;其他的都是引用的&#xff0c;借…...

编程日记 2023/3/20 5:32:45

elasticsearch 环境搭建和基本操作

参考资料 适合后端编程人员的elasticsearch快速实战教程 ElasticSearch最新实战教程 ElasticSearch配套笔记 自制搜索引擎 https://www.elastic.co/guide/en/elasticsearch/reference/7.17/setup.html restful风格的api REST 设计风格 例如以下springboot示例 RestContr…...

编程日记 2023/3/20 5:27:42

IDEA操作：Springboot项目打包为jar包并运行

在IDEA环境下对Springboot项目打包为jar包且在terminal运行操作 1、 2、 3、注意&#xff1a;在项目目录里创建一个用来存放jar包的文件夹&#xff08;res&#xff09;,该路径不能使用IDEA设置的默认路径&#xff0c;必须手动创建。 4、 5、点击ok后加载运行包 &#xff08;8…...

编程日记 2023/3/20 5:22:41

原理底层计划---JVM

二、JVM对空间大小怎么配置&#xff1f;各区域怎么划&#xff1f; 新生代&#xff1a;短时间生成&#xff0c;可以马上回收 老生代&#xff1a;少部分对象会存在很久&#xff0c;回收策略应不同 三、JVM哪些内存区域会发生内存溢出&#xff08;程序计数器不会&#xff09; …...

编程日记 2023/3/20 5:17:38

CSDN-猜年龄、纸牌三角形、排他平方数

猜年龄 原题链接&#xff1a;https://edu.csdn.net/skill/practice/algorithm-a413078fb6e74644b8c9f6e28896e377/2258 美国数学家维纳(N.Wiener)智力早熟&#xff0c;11岁就上了大学。他曾在1935~1936年应邀来中国清华大学讲学。 一次&#xff0c;他参加某个重要会议&#xf…...

编程日记 2023/3/20 5:12:36

【Linux】软件包管理器 yum

什么是软件包和软件包管理器 在 Linux 下需要安装软件时&#xff0c; 最原始的办法就是下载到程序的源代码&#xff0c; 进行编译得到可执行程序。但是这样太麻烦了&#xff0c;所以有些人就把一些常用的软件提前编译好, 做成软件包 ( 就相当于windows上的软件安装程序)放在服…...

编程日记 2023/3/20 5:07:34

一天吃透TCP面试八股文

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…...

编程日记 2023/3/20 5:02:31

zzu天梯赛选拔

C. NANA去上课 — 简单数学 需要记录上一步处在哪个位置 然后判断如果是同一侧移动距离就是abs&#xff08;x1 - x2&#xff09; 如果不同就是x1 x2 #include <iostream> #include <cmath> using namespace std; #define int long long signed main() {int n; c…...

编程日记 2023/3/20 4:57:30

【C语言】一篇让你彻底吃透（结构体与结构体位段）

本章重点 主要讲解结构体和位移动的使用和定义与声明&#xff0c;并且结构体和位段在内存中是如何存储的。 文章目录结构体结构体类型的声明结构体特殊的声明结构体变量的定义和初始化结构体成员的访问结构的自引用结构体内存对齐结构体传参位段什么是位段位段的内存分配位段的…...

编程日记 2023/3/20 4:52:29

数据结构之二叉树构建、广度/深度优先(前序、中序、后序)遍历

一、二叉树 1.1 树 说到树&#xff0c;我们暂时忘记学习&#xff0c;来看一下大自然的树&#xff1a; 哈哈 以上照片是自己拍的&#xff0c;大家凑合看看 回归正题&#xff0c;那么在数据结构中&#xff0c;树是什么呢&#xff0c;通过上面的图片大家也可以理解 树是一种非…...

编程日记 2023/3/20 4:47:26

“国产版ChatGPT”文心一言发布会现场Demo硬核复现

文章目录前言实验结果一、文学创作问题1 :《三体》的作者是哪里人&#xff1f;问题2&#xff1a;可以总结下三体的核心内容吗&#xff1f;如果要续写的话&#xff0c;可以从哪些角度出发&#xff1f;问题3&#xff1a;如何从哲学角度来进行续写&#xff1f;问题4&#xff1a;电…...

编程日记 2023/3/20 4:42:22

202304读书笔记|《不被定义的女孩》——做最真实最漂亮的自己，依心而行

202304读书笔记|《不被定义的女孩》——做最真实最漂亮的自己&#xff0c;依心而行《不被定义的女孩》作者ASEN&#xff0c;很棒的书。处处透露着洒脱&#xff0c;通透&#xff0c;悦己&#xff0c;阅世界的自由的氛围和态度&#xff01; 部分节选如下&#xff1a; 让自己活得…...

编程日记 2023/3/20 4:37:21

SpringBoot帮你优雅的关闭WEB应用程序

Graceful shutdown 应用 Graceful shutdown说明 Graceful shutdown is supported with all four embedded web servers (Jetty, Reactor Netty, Tomcat, and Undertow) and with both reactive and servlet-based web applications. It occurs as part of closing the applica…...

编程日记 2023/3/20 4:32:17

递归与递推

递归 直白理解&#xff1a;函数在其内部调用自身&#xff08;自己调用自己&#xff09;所有递归都可以采用递归搜索树来理解递归的特点&#xff1a; 一般来说代码较为简短&#xff0c;但是理解难度大一般时间和空间消耗较大&#xff0c;容易产生重复计算&#xff0c;可能爆栈 …...

编程日记 2023/3/20 4:27:13

使用＜style scoped＞导致的样式问题

问题描述&#xff1a; 今天使用开源组件库TDesign的自动补全组件时&#xff0c;遇到了一个样式失效问题&#xff0c;一开始怎么也找不到问题出在哪&#xff0c;后面一个偶然去掉了scoped&#xff0c;竟然发现样式竟然正常了&#xff0c;具体原因不知道在哪&#xff0c;有大佬知…...

编程日记 2023/3/20 4:22:07

Elasticsearch深入理解（十八）-集群关键指标及调优指南

1、CPU使用率 CPU使用率是指在一段时间内CPU执行程序的百分比&#xff0c;它是衡量系统资源利用率的一种指标。 1.1 详细说明&#xff1a; 在Elasticsearch中&#xff0c;高的CPU使用率通常意味着节点正在执行大量的计算任务&#xff0c;这可能是因为索引和搜索操作的负载较大…...

编程日记 2023/3/20 4:17:05

Transformer到底为何这么牛

从注意力机制&#xff08;attention&#xff09;开始&#xff0c;近两年提及最多的就是Transformer了&#xff0c;那么Transformer到底是什么机制&#xff0c;凭啥这么牛&#xff1f;各个领域都能用&#xff1f;一文带你揭开Transformer的神秘面纱。 目录 1.深度学习&#xff0…...

编程日记 2023/3/20 4:12:03

【Spring事务】声明式事务 使用详解

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 声明式事务一、编程式事务二、声明式事务&…...

编程日记 2023/3/20 4:07:00