当前位置: 首页 > 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;不…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...