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

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...