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

发光立方体效果 html+css

news 2026/2/10 22:55:20

一.话不多，看效果

在这里插入图片描述
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

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/9 20:30:28

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2026/1/25 7:20:01

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2026/2/3 13:01:10