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

使用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…...

贵州省二级分类土地利用数据(矢量)

贵州省&#xff0c;地处中国西南腹地&#xff0c;地貌属于中国西南部高原山地&#xff0c;境内地势西高东低&#xff0c;自中部向北、东、南三面倾斜&#xff0c;平均海拔在1100米左右。贵州高原山地居多&#xff0c;素有“八山一水一分田”之说。全省地貌可概括分为&#xff1…...

通过nginx+xray服务搭建及本地配置

一、xray服务配置 下载&#xff1a;https://github.com/XTLS/Xray-core 进入下载界面 这里我选择的是Xray-linux-64.zip 将文件解压到 /usr/local/xray 编辑配置文件/usr/local/xray/config.json uuid可以在v2ray客服端自动生成&#xff0c;也可以在UUID v4 生成器 - KKT…...

第一节 Axure RP产品经理原型进阶学习

第一天 1、认识RP9 Axure RP 9&#xff0c;Axure RP 9是美国 Axure Software Solution公司的旗舰产品&#xff0c; 是一个快速的原型工具&#xff0c;常用于各项网络设计&#xff0c;包括了原型图、线框图等等。 要进行原型设计&#xff0c;将文字性文档转变为互动性的可视画…...

Linux实战笔记(三) 文件压缩

大家好&#xff0c;我是半虹&#xff0c;这篇文章来讲 Linux 系统中常用的文件压缩方式 0、序言 在 Linux 系统中&#xff0c;存在许多打包或压缩文件的工具 这篇文章会对一些常用的工具进行分类整理和介绍 如果只是需要知道怎么对不同格式的文件做解压缩&#xff0c;可以直…...

树形递归模板

详情参考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库在数据合并与重塑方面的强大功能。我们将涵盖多种数据合并方法&#xff0c;如merge、join、concat等&#xff0c;以及数据重塑的技巧&#xff0c;如pivot_table、merge_asof等。 一、引言 Pandas是一个强大的Python数据分析库&#xff0c;它提供了丰富…...

如何理解 Linux 命令行参数与环境变量7

一、命令行参数 1.1参数介绍 在写C语言程序时&#xff0c;main函数是否可以带参数呢&#xff1f;------ 是可以的 int argc: 命令行参数的个数char *argv[ ]: 字符指针数组&#xff08;指向各个命令行参数的字符指针所构成的数组&#xff09; 我们写一段代码来打印一下看这…...

奥特曼回应GPT5

欢迎再次与大家会面&#xff01;在积累了大量的信息和趋势后&#xff0c;今天我们将深入了解 Sora、OpenAI 董事会、以及近期与其有关的所有声讨。我们将直接跳入与 OpenAI 首席执行官 Sam Altman 的深度访谈&#xff0c;探讨从 AGI 到 GPT-5 的未来&#xff0c;以及 Sam 对人工…...

QT----给程序添加上任务栏托盘图标和退出

让我们的程序拥有任务栏托盘图标&#xff0c;实现程序后台运行&#xff0c;退出等功能 1、关闭程序保持后台 重写关闭事件,忽略点击窗口关闭 void MainWindow::closeEvent(QCloseEvent *event) {// 隐藏窗口&#xff0c;而不是真正关闭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 走进网络

走进网络 长风破浪会有时&#xff0c;直挂云帆济沧海。 1.认识计算机 1.计算机网络是由计算机和通讯构成的&#xff0c;网络研究的是“通信”。 ------1946 世界上第一台计算机 2.终端&#xff1a;只有输入和输出功能&#xff0c;没有计算和处理功能。 3.数据&#xff1a;一串…...

SWIFT介绍和学习(简单入门级别)

SWIFT介绍和学习 SWIFT功能介绍SWIFT快速使用LLM及LLM最佳实践&#xff08;LLM系列文章&#xff09;部署指南 vllm非官方介绍资料 项目地址&#xff1a;https://github.com/modelscope/swift 任何有疑惑的地方&#xff0c;参考项目首页readme寻求答案 SWIFT功能介绍 SWIFT&…...

智慧城市:提升城市治理能力的关键

目录 一、智慧城市的概念及特点 二、智慧城市在提升城市治理能力中的应用实践 1、智慧交通&#xff1a;提高交通治理效率 2、智慧政务&#xff1a;提升政府服务水平 3、智慧环保&#xff1a;加强环境监测与治理 4、智慧安防&#xff1a;提高城市安全水平 三、智慧城市在…...

golang 对接第三方接口 RSA 做签(加密) 验签(解密)

一、过程 1.调用第三方接口前&#xff0c;一般需要按规则将参数按key1value1&key2value2 阿斯克码排序,sign参数不参与加密 2.将排序并连接好的参数字符串通过我方的私钥证书&#xff08;.pem&#xff09;进行加密得到加密串&#xff0c;当然加密得到的是 []byte 字节流&…...

Spring Data访问Elasticsearch----Elasticsearch存储库Repositories

Spring Data访问Elasticsearch----Elasticsearch存储库Repositories 一、自动创建具有相应映射的索引二、存储库方法的注解2.1 Highlight2.2 SourceFilters 三、基于注解的配置四、Spring命名空间Namespace 本文包括Elasticsearch存储库实现的细节。 例1&#xff1a;示例Book实…...

初探 Cocos Creator: 碰撞与物理系统

前言 不知道你刚开始玩碰撞时&#xff0c;会不会遇到始终无法触发碰撞事件&#xff1f;玩物理系统时&#xff0c;自由落体的刚体会穿过 “地面” 刚体等情况&#xff1f;没错我全都遇到过&#xff0c;那么下面我就用红蓝色方块&#xff0c;简单实战一下 Cocos Creator 的碰撞与…...

Vue组件封装方案对比——v-if方式与内置component方式

近期在准备搭建一个通用组件库&#xff0c;而公司现有的各个系统也已有自己的组件库只是没抽离出来&#xff0c;但是目前有两套不同的组件封装方案&#xff0c;所以对于方案的选择比较困惑&#xff0c;于是对两种方式进行了对比&#xff0c;结合网上找到的一些开源组件库进行分…...

python与excel第四节 批量新增、删除工作表

在多个工作簿中批量新增工作表 假设&#xff0c;一个文件夹下面有多个excel文件&#xff0c;需要再每个excel文件中增加一个sheet。 例子&#xff1a; import osimport xlwings as xw file_path D:\\TEST\\python与excelfile_list os.listdir(file_path) sheet_name 产品…...

计算机网络——计算机网络体系结构

计算机网络——计算机网络体系结构 计算机网络体系结构的由来正确认识分层协议与层次划分著名的几个体系结构OSI体系结构TCP/IP体系结构5层体系结构 我们今天来了解一下计算机网络体系结构&#xff1a; 计算机网络体系结构的由来 俗话说&#xff0c;“没有规矩&#xff0c;不…...

鸿蒙系统微博应用锁常见问题解答

为微博设置应用锁后&#xff0c;不少用户会有各种疑问&#xff1a;忘记密码怎么办&#xff1f;会不会影响消息推送&#xff1f;能不能只锁定某些功能&#xff1f;应用锁耗电吗&#xff1f;本文将针对这些高频问题逐一解答&#xff0c;帮助您更好地使用鸿蒙系统&#xff08;Harm…...

PCB虚焊/走线断裂/焊盘脱落工程师易漏判

PCB 故障中&#xff0c;30% 并非元件损坏&#xff0c;而是 PCB 本身的隐性故障—— 虚焊、走线断裂、焊盘脱落、过孔开路。这类故障外观隐蔽、时好时坏、排查难度大&#xff0c;很多工程师反复更换元件仍无法解决&#xff0c;最终误判为 “板报废”。​一、PCB 隐性故障核心成因…...

内存占用3KB!极致瘦身释放MCU无限可能

极致小体积&#xff0c;给工业领域带来了无限的可能&#xff1a;更低硬件成本&#xff0c;更小芯片体积&#xff0c;更低功耗&#xff0c;更高可靠性&#xff0c;让每一颗小MCU都拥有大系统的完整能力。 https://www.bilibili.com/video/BV1eZLi6PEjc/?spm_id_from333.1387.ho…...

AI写的论文双率如何压到20%以下?这几款工具实测有效

毕业季、投稿季用AI写论文已经成为不少人的高效选择&#xff0c;但查重率飘红、AIGC疑似率超标两大问题&#xff0c;让很多人犯了难。2026年学术检测标准持续收紧&#xff0c;知网、维普及主流AIGC检测系统同步上线双检规则&#xff0c;两项指标均控制在20%以下才符合基本提交要…...

Keil µVision链接器错误204解决方案

1. 问题现象与背景解析最近在使用Keil Vision进行嵌入式开发时&#xff0c;不少工程师遇到了一个令人头疼的链接器错误。具体表现为编译时出现"FATAL ERROR 204: INVALID KEYWORD"的致命错误&#xff0c;错误位置指向链接器控制文件中的特定行。这个问题在C166和C51两…...

告别硬编码!在UE5.1里用蓝图动态配置MySQL连接参数(控件蓝图实战)

动态配置MySQL连接&#xff1a;UE5.1控件蓝图的工程化实践在游戏开发中&#xff0c;数据库连接往往是项目架构中不可或缺的一环。传统硬编码方式虽然简单直接&#xff0c;却带来了维护困难、安全性差、灵活性低等一系列问题。本文将深入探讨如何在UE5.1中构建一个完全动态化的M…...

基于USB ACA模式实现安卓手机边玩边充的游戏手柄设计

1. 项目缘起&#xff1a;当手机性能过剩&#xff0c;却败给了触摸屏几年前&#xff0c;我清理手机游戏时&#xff0c;发现一个挺无奈的现象&#xff1a;性能足以媲美掌机的智能手机里&#xff0c;只剩下一些慢节奏的平台解谜或者数独。那些曾经让我在掌机上废寝忘食的赛车、动作…...

如何在3分钟内为任何活动搭建专业级滚动抽奖系统?Magpie-LuckyDraw全平台开源方案深度解析

如何在3分钟内为任何活动搭建专业级滚动抽奖系统&#xff1f;Magpie-LuckyDraw全平台开源方案深度解析 【免费下载链接】Magpie-LuckyDraw &#x1f3c5;A fancy lucky-draw tool supporting multiple platforms&#x1f4bb;(Mac/Linux/Windows/Web/Docker) 项目地址: https…...

告别DLL缺失烦恼!Visual C++运行库合集一键搞定Windows应用依赖问题

告别DLL缺失烦恼&#xff01;Visual C运行库合集一键搞定Windows应用依赖问题 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 你是否曾经在打开某个软件或游戏时…...

别再死记公式了!用Python手写一个卷积层,彻底搞懂CNN里的‘卷’是怎么算的

用Python手写卷积层&#xff1a;从零理解CNN的"卷"运算 当你第一次看到卷积神经网络(CNN)的数学公式时&#xff0c;那些复杂的符号和下标是否让你望而却步&#xff1f;作为计算机视觉领域的基石&#xff0c;CNN的核心在于理解卷积运算的本质。本文将带你用NumPy从零实…...