使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
<!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><!--QQ沐编程 www.qqmu.com 学习QQ群：290987565 域名抢注 33210.jm.cn --><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>相关文章：
使用html+css制作一个发光立方体特效
使用htmlcss制作一个发光立方体特效 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Documen…...
贵州省二级分类土地利用数据(矢量)
贵州省，地处中国西南腹地，地貌属于中国西南部高原山地，境内地势西高东低，自中部向北、东、南三面倾斜，平均海拔在1100米左右。贵州高原山地居多，素有“八山一水一分田”之说。全省地貌可概括分为࿱…...
通过nginx+xray服务搭建及本地配置
一、xray服务配置 下载：https://github.com/XTLS/Xray-core 进入下载界面 这里我选择的是Xray-linux-64.zip 将文件解压到 /usr/local/xray 编辑配置文件/usr/local/xray/config.json uuid可以在v2ray客服端自动生成，也可以在UUID v4 生成器 - KKT…...
第一节 Axure RP产品经理原型进阶学习
第一天 1、认识RP9 Axure RP 9，Axure RP 9是美国 Axure Software Solution公司的旗舰产品， 是一个快速的原型工具，常用于各项网络设计，包括了原型图、线框图等等。 要进行原型设计，将文字性文档转变为互动性的可视画…...
 文件压缩)
Linux实战笔记(三) 文件压缩
大家好，我是半虹，这篇文章来讲 Linux 系统中常用的文件压缩方式 0、序言 在 Linux 系统中，存在许多打包或压缩文件的工具 这篇文章会对一些常用的工具进行分类整理和介绍 如果只是需要知道怎么对不同格式的文件做解压缩，可以直…...
树形递归模板
详情参考CSDN链接: https://www.cnblogs.com/lidar/p/12972792.html public class Menu {// 菜单idprivate String id;// 菜单名称private String name;// 父菜单idprivate String parentId;// 菜单urlprivate String url;// 菜单图标private String icon;// 菜单顺序private …...
Python实战：Pandas数据合并与重塑
本文将深入探讨Pandas库在数据合并与重塑方面的强大功能。我们将涵盖多种数据合并方法，如merge、join、concat等，以及数据重塑的技巧，如pivot_table、merge_asof等。 一、引言 Pandas是一个强大的Python数据分析库，它提供了丰富…...
如何理解 Linux 命令行参数与环境变量7
一、命令行参数 1.1参数介绍 在写C语言程序时，main函数是否可以带参数呢？------ 是可以的 int argc: 命令行参数的个数char *argv[ ]: 字符指针数组（指向各个命令行参数的字符指针所构成的数组） 我们写一段代码来打印一下看这…...
奥特曼回应GPT5
欢迎再次与大家会面！在积累了大量的信息和趋势后，今天我们将深入了解 Sora、OpenAI 董事会、以及近期与其有关的所有声讨。我们将直接跳入与 OpenAI 首席执行官 Sam Altman 的深度访谈，探讨从 AGI 到 GPT-5 的未来，以及 Sam 对人工…...
QT----给程序添加上任务栏托盘图标和退出
让我们的程序拥有任务栏托盘图标，实现程序后台运行，退出等功能 1、关闭程序保持后台 重写关闭事件,忽略点击窗口关闭 void MainWindow::closeEvent(QCloseEvent *event) {// 隐藏窗口，而不是真正关闭setVisible(false);// 忽略关闭事件&am…...
arm地址对齐的总结
static void axi_azx_writeb(u8 value, u8 __iomem *addr) { u32 data; u32 offset; offset (u64)addr & 0x03; // 编译器不允许地址做& 操作时要强转为数据 addr (u8 __iomem *)((u64)addr & 0xFFFFFFFFFFFFFFFC); // __iomem是个64位的地址 u8表示从这个地址…...
就业班 2401--3.13 走进网络
走进网络 长风破浪会有时，直挂云帆济沧海。 1.认识计算机 1.计算机网络是由计算机和通讯构成的，网络研究的是“通信”。 ------1946 世界上第一台计算机 2.终端：只有输入和输出功能，没有计算和处理功能。 3.数据：一串…...
)
SWIFT介绍和学习(简单入门级别)
SWIFT介绍和学习 SWIFT功能介绍SWIFT快速使用LLM及LLM最佳实践（LLM系列文章）部署指南 vllm非官方介绍资料 项目地址：https://github.com/modelscope/swift 任何有疑惑的地方，参考项目首页readme寻求答案 SWIFT功能介绍 SWIFT&…...
智慧城市：提升城市治理能力的关键
目录 一、智慧城市的概念及特点 二、智慧城市在提升城市治理能力中的应用实践 1、智慧交通：提高交通治理效率 2、智慧政务：提升政府服务水平 3、智慧环保：加强环境监测与治理 4、智慧安防：提高城市安全水平 三、智慧城市在…...
golang 对接第三方接口 RSA 做签（加密） 验签（解密）
一、过程 1.调用第三方接口前，一般需要按规则将参数按key1value1&key2value2 阿斯克码排序,sign参数不参与加密 2.将排序并连接好的参数字符串通过我方的私钥证书（.pem）进行加密得到加密串，当然加密得到的是 []byte 字节流&…...
Spring Data访问Elasticsearch----Elasticsearch存储库Repositories
Spring Data访问Elasticsearch----Elasticsearch存储库Repositories 一、自动创建具有相应映射的索引二、存储库方法的注解2.1 Highlight2.2 SourceFilters 三、基于注解的配置四、Spring命名空间Namespace 本文包括Elasticsearch存储库实现的细节。 例1：示例Book实…...
初探 Cocos Creator： 碰撞与物理系统
前言 不知道你刚开始玩碰撞时，会不会遇到始终无法触发碰撞事件？玩物理系统时，自由落体的刚体会穿过 “地面” 刚体等情况？没错我全都遇到过，那么下面我就用红蓝色方块，简单实战一下 Cocos Creator 的碰撞与…...
Vue组件封装方案对比——v-if方式与内置component方式
近期在准备搭建一个通用组件库，而公司现有的各个系统也已有自己的组件库只是没抽离出来，但是目前有两套不同的组件封装方案，所以对于方案的选择比较困惑，于是对两种方式进行了对比，结合网上找到的一些开源组件库进行分…...
python与excel第四节 批量新增、删除工作表
在多个工作簿中批量新增工作表 假设，一个文件夹下面有多个excel文件，需要再每个excel文件中增加一个sheet。 例子： import osimport xlwings as xw file_path D:\\TEST\\python与excelfile_list os.listdir(file_path) sheet_name 产品…...
计算机网络——计算机网络体系结构
计算机网络——计算机网络体系结构 计算机网络体系结构的由来正确认识分层协议与层次划分著名的几个体系结构OSI体系结构TCP/IP体系结构5层体系结构 我们今天来了解一下计算机网络体系结构： 计算机网络体系结构的由来 俗话说，“没有规矩，不…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
P3 QT项目----记事本（3.8）
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
探索Selenium：自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机，交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息，系统版本：Ubuntu22.04.5 LTS；内核版本…...
区块链技术概述
区块链技术是一种去中心化、分布式账本技术，通过密码学、共识机制和智能合约等核心组件，实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点：数据存储在网络中的多个节点（计算机），而非…...