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

Css环形旋转立体感动画

news 来源：原创 2025/7/20 2:43:10

Css环形旋转立体感动画
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>Css环形旋转立体感动画</title><link rel="stylesheet" href="./style.css"></head>
<body>
<!-- partial:index.partial.html -->
<figure><div class="c"></div><div class="c2"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="c3"></div><div class="c4"></div><div class="c5"></div><div class="c6"></div>
</figure>
<!-- partial --></body>
</html>

style.css

html{height:100%;}body{background:#222222;background: linear-gradient(#222222,#4e6e79);overflow:hidden;}.c{width:240px;height:240px;border:3px solid #98bdcd;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,-50px);}
.c:after{content:"";position:absolute;left:-10px;top:-10px;width:100%;height:100%;border-radius:50%;border:10px solid #98bdcd;border-top-color:transparent;border-bottom-color:transparent;animation:R 10s infinite linear;}.c2{width:100%;height:100%;border:1px solid #7a929c;border-radius:50%;position:absolute;top:0;left:0;padding:1px;animation:L 80s infinite linear;box-sizing:border-box;}.c3{width:33%;height:33%;border:2px solid #a05d55;border-radius:50%;transform:translate3d(-50%,-50%,5px);position:absolute;top:50%;left:50%;}
.c3:after{content:"";position:absolute;left:-5px;top:-5px;width:100%;height:100%;border-radius:50%;border:5px solid #a05d55;border-top-color:transparent;border-bottom-color:transparent;animation:L 5s infinite linear;}.c4{width:75px;height:75px;transform:translate3d(-50%,-50%,0px);position:absolute;left:50%;top:50%;}
.c4:after{content:"";width:100%;height:100%;position:absolute;left:-3px;top:-3px;border-radius:50%;border:3px solid #98bdcd;border-left-color:transparent;animation:R 5s infinite linear;}.c5{width:77px;height:77px;transform:translate3d(-50%,-50%,65px);position:absolute;left:50%;top:50%;border-radius:50%;}
.c5:after{content:"";width:100%;height:100%;position:absolute;left:-1px;top:-1px;border:1px solid #7a929c;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;animation:L 5s infinite linear;}.c6{width:55px;height:55px;transform:translate3d(-50%,-50%,61px);position:absolute;left:50%;top:50%;border-radius:50%;}
.c6:after{content:"";width:100%;height:100%;position:absolute;left:-1px;top:-1px;border:1px solid #7a929c;border-right-color:transparent;border-top-color:transparent;border-radius:50%;animation:R 10s infinite linear;}i{height:15px;width:1px;background:#98bdcd;position:absolute;left:50%;margin-left:-10px;transform-origin:1000% 1005%;}i:nth-child(1){transform:rotate(-5deg);}
i:nth-child(2){transform:rotate(5deg);}
i:nth-child(3){transform:rotate(15deg);}
i:nth-child(4){transform:rotate(25deg);}
i:nth-child(5){transform:rotate(35deg);}
i:nth-child(6){transform:rotate(45deg);}
i:nth-child(7){transform:rotate(55deg);}
i:nth-child(8){transform:rotate(65deg);}
i:nth-child(9){transform:rotate(75deg);}
i:nth-child(10){transform:rotate(85deg);}
i:nth-child(11){transform:rotate(95deg);}
i:nth-child(12){transform:rotate(105deg);}
i:nth-child(13){transform:rotate(115deg);}
i:nth-child(14){transform:rotate(125deg);}
i:nth-child(15){transform:rotate(135deg);}
i:nth-child(16){transform:rotate(145deg);}
i:nth-child(17){transform:rotate(155deg);}
i:nth-child(18){transform:rotate(165deg);}
i:nth-child(19){transform:rotate(175deg);}
i:nth-child(20){transform:rotate(185deg);}
i:nth-child(21){transform:rotate(195deg);}
i:nth-child(22){transform:rotate(205deg);}
i:nth-child(23){transform:rotate(215deg);}
i:nth-child(24){transform:rotate(225deg);}
i:nth-child(25){transform:rotate(235deg);}
i:nth-child(26){transform:rotate(245deg);}
i:nth-child(27){transform:rotate(255deg);}
i:nth-child(28){transform:rotate(265deg);}
i:nth-child(29){transform:rotate(275deg);}
i:nth-child(30){transform:rotate(285deg);}
i:nth-child(31){transform:rotate(295deg);}
i:nth-child(32){transform:rotate(305deg);}
i:nth-child(33){transform:rotate(315deg);}
i:nth-child(34){transform:rotate(325deg);}
i:nth-child(35){transform:rotate(335deg);}
i:nth-child(36){transform:rotate(345deg);}
i:nth-child(37){transform:rotate(355deg);}
i:nth-child(38){transform:rotate(365deg);}figure{width:305px;height:305px;margin:0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotateX(-40deg) rotateY(30deg) scale(1.1,1.1);transition:1.4s;transform-style: preserve-3d;}
figure:hover{transform:translate(-50%,-50%) rotateX(0deg) rotateY(0deg) scale(1.1,1.1);}@keyframes R{0%{transform:rotate(20deg);}100%{transform:rotate(380deg)}
}
@keyframes L{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg)}
}

Css环形旋转立体感动画

Css环形旋转立体感动画 index.html <!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>Css环形旋转立体感动画</title><link rel"stylesheet" href"./style.css">&l…...

编程日记 2025/7/20 2:43:10

音乐极客指南：Melody高音质私有云音乐平台本地部署方案

文章目录前言1. 添加镜像源2. 本地部署Melody3. 本地访问与使用演示4. 安装内网穿透5. 配置Melody公网地址6. 配置固定公网地址前言嘿，各位音乐爱好者们！今天我要带大家玩个大招——在香橙派Zero3上搭建你的专属在线音乐平台，还能通过cpo…...

编程日记 2025/7/16 5:13:28

Microi吾码界面设计引擎之基础组件用法大全【内置组件篇·中】

🎀🎀🎀 microi-pageengine 界面引擎系列 🎀🎀🎀 一、Microi吾码：一款高效、灵活的低代码开发开源框架【低代码框架】二、Vue3项目快速集成界面引擎三、Vue3 界面设计插件 microi-pageengine …...

编程日记 2025/7/20 2:43:09

# WebSocket 与 Socket.IO 对比与优化

核心概念对比 WebSocket 协议性质：HTML5 提供的全双工通信协议 (RFC 6455)连接方式：基于 TCP 的低层协议通信模式：持久化连接，服务端可主动推送协议升级：通过 HTTP 101 状态码切换协议 Socket.IO 协议性质&#xf…...

编程日记 2025/7/20 2:32:00

vue3中，route4，获取当前页面路由的问题

首先应用场景如下： 在main.js里面，引入的是路由的配置文件，如下： import {router} from /router; app.use(router); 路由配置文件router.js如下： import { createRouter, createWebHistory } from vue-router; imp…...

编程日记 2025/7/16 18:35:08

python将整个txt文件写入excel的一个单元格？

要将整个txt文件写入Excel的一个单元格，可以使用Python的openpyxl库来实现。以下是一个简单的示例代码： from openpyxl import Workbook# 读取txt文件内容 with open(file.txt, r) as file:txt_content file.read()# 创建一个新的Excel工作簿 wb Work…...

编程日记 2025/7/20 2:38:08

日志2333

Pss-9 这一关考察的是时间盲注先练习几个常见命令语句： select sleep(5);--延迟5s输出结果 if （1>0,ture,false）;--输出‘ture’ /if （1<0,ture,false）;--输出‘false’ select ascii()/select ord()返回字…...

编程日记 2025/7/20 2:29:41

用Deepseek写扫雷uniapp小游戏

扫雷作为Windows系统自带的经典小游戏，承载了许多人的童年回忆。本文将详细介绍如何使用Uniapp框架从零开始实现一个完整的扫雷游戏，包含核心算法、交互设计和状态管理。无论你是Uniapp初学者还是有一定经验的开发者，都能从本文中获得启发。 …...

编程日记 2025/7/19 12:55:27

C++中的异常和智能指针

一、C中的异常 1.1C语言中关于错误的处理（回顾） 1.1.1处理一：文件中的错误码，错误信息 C语言中，文件打开成功则返回地址，不成功返回0 FILE* foutfopen("Test.txt","r"); cout<&…...

编程日记 2025/7/17 7:12:11

Selenium 简单入门操作示例

最简单的 Selenium 示例（Python版） 下面是一个完整的、最简单的 Selenium 操作示例，带你快速上手： from selenium import webdriver from selenium.webdriver.common.by import By import time# 1. 启动浏览器（这里使…...

编程日记 2025/7/20 2:40:38

6.1 模拟专题：LeetCode 1576. 替换所有的问号

1. 题目链接 LeetCode 1576. 替换所有的问号 2. 题目描述给定一个仅包含小写字母和问号 ? 的字符串 s，要求将所有 ? 替换为任意小写字母，使得替换后的字符串中没有相邻的两个字符相同。示例： 输入：s "?zs" →…...

编程日记 2025/7/16 11:11:11

前端知识点---用正则表达式判断邮箱(javascript)

// 全面的正则（兼容大多数情况） const emailRegex /^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$/;// 或直接使用浏览器内置验证 <input type"email" required>/：正则表达式的起始和结束标志。 ^：匹配字符串的…...

编程日记 2025/7/19 8:43:03

深度剖析 Spring 源码性能优化：核心原理与最佳实践

深度剖析 Spring 源码 & 性能优化：核心原理与最佳实践 🚀 Spring 框架作为 Java 生态的核心技术，广泛应用于企业级开发。但很多开发者只会“用”Spring，而不深入其内部原理，导致无法高效排查问题 & 进行性能优…...

编程日记 2025/7/17 8:46:04

Axure RP9教程：轮播图（动态面板） | 头部锁定

文章目录引言I 轮播图操作步骤在画布中添加一个动态面板设置面板状态II 头部锁定将头部区域选中，右键组合或用Ctrl+G快捷键；将组合的头部区域，右键创建动态面板;引言动态面板的功能十分强大，比如：拥有独立的内部坐标系，有多个状态； Banner的案例中会用到动态面板多个…...

编程日记 2025/7/14 10:07:46

rabbitmq承接MES客户端服务器

文章目录背景整体架构概述方案详细步骤1. 数据库选型与搭建2. 设备端数据上传至数据库3. 搭建 RabbitMQ 服务器4. 数据同步模块（数据库到 RabbitMQ）5. MES 服务器从 RabbitMQ 接收数据6. 指令接收模块（RabbitMQ 到设备端） 7. MES…...

编程日记 2025/7/18 1:10:39

重学vue3(三)：vue3基本语法及使用

组合式 API是vue3 的核心特性，替代 Vue2 的选项式 API，强调逻辑复用和代码组织。基本语法如下： <script setup> import { ref, reactive, computed, onMounted } from vue;// 1. 响应式数据 const count ref(0); // 基本类…...

编程日记 2025/7/18 1:31:06

算法｜麻雀搜索算法原理，公式，改进算法综述，应用场景及matlab完整代码

一、麻雀搜索算法（SSA）原理 1. 算法基础麻雀搜索算法（Sparrow Search Algorithm, SSA）是2020年提出的一种群体智能优化算法，灵感来源于麻雀群体的觅食与反捕食行为。算法将麻雀分为三类角色：发现者（Producer）：适应度最高，负责探索全局最优区域；加入者（Follower）…...

编程日记 2025/7/16 1:52:19

0322-数据库与前后端的连接、数据库表的增删改查

前端 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Insert title here</title> <script srcjs/jquery-3.7.1.min.js></script> <script> //jquaryajax发起请求 //传参形式不同 post用data{}…...

编程日记 2025/7/17 19:24:11

详细介绍Qt中用于断言的宏 Q_ASSERT

Q_ASSERT 是 Qt 框架中用于调试的核心宏之一，其作用类似于标准 C/C 的 assert，但针对 Qt 的特性进行了优化。它用于在开发阶段验证程序的逻辑正确性，帮助开发者快速定位潜在的错误。 1.基本用法 Q_ASSERT(condition);功能：在调试…...

编程日记 2025/7/15 5:14:48

基于Python的自然语言处理系列（60）：使用 LangChain 构建 Multi-Vector Retriever 进行文档检索

在 NLP 和 AI 领域，基于嵌入（Embeddings）进行文档检索已成为一种高效的解决方案。本文介绍如何使用 LangChain 构建 Multi-Vector Retriever，实现对长文档的分块索引和高效检索。 1. 环境准备首先，我们需要安装相关…...

编程日记 2025/7/19 5:18:55

Dify 部署指南-离线版

Docker 部署 1、访问 Docker 官网 (https://www.docker.com/) 获取安装包。 2、上传 Docker 安装包 3、进入解压目录，执行解压命令 tar xzvf docker-28、0.2、tgz4、将解压文件中的 Docker 相关文件移动到 /usr/bin/ 目录 sudo cp docker/* /usr/bin/5、创建…...

编程日记 2025/7/19 23:04:41

解决 Element UI 嵌套弹窗的状态管理问题！！！

解决 Element UI 嵌套弹窗的状态管理问题 🔧 问题描述 ❓ 在使用 Element UI 开发一个多层嵌套弹窗功能时，遇到了以下问题： 弹窗只能打开一次，第二次点击无法打开 🚫收到 Vue 警告：避免直接修改 prop 值…...

编程日记 2025/7/16 8:33:47

基于STM32单片机的智能手环/音乐播放/语音识别

基于STM32单片机的智能手环/音乐播放/语音识别持续更新，欢迎关注!!! ** 基于STM32单片机的智能手环/音乐播放/语音识别 ** 21世纪，社会高速发展，生活物质越来越丰富，随着科技的进步，智能化成为了人们关注的焦点&am…...

编程日记 2025/7/15 20:38:19

NFC 智能门锁全栈解决方案：移动端、服务器、Web 管理平台

目录一、系统整体架构二、移动端 APP 开发 2.1 开发环境与基础准备 2.2 主要功能模块 2.3 示例代码（Android/Kotlin 简化示例） 三、后台服务开发 3.1 环境准备 3.2 主要功能 3.3 示例代码（Node.js Express 简化示例） …...

编程日记 2025/7/19 18:23:21

使用 Python 开发 MCP Server 及 Inspector 工具详解

使用 Python 开发 MCP Server 及 Inspector 工具详解前言模型上下文协议 (Model Context Protocol, MCP) 是一种新兴的协议，旨在让大型语言模型 (LLM) 更容易地与外部工具和服务集成。本文将介绍如何使用 Python 开发一个 MCP Server，并详细讲解如何使…...

编程日记 2025/7/12 14:13:13

论坛系统测试报告

一、项目背景为论坛系统项目设计并进行自动化测试。论坛系统由六个页面构成：用户登录页、用户注册页、个人中心页面、我的帖子页面、帖子编辑页、帖子列表页以及帖子详情页。通过使用selenium工具来定位到web中的元素，对获取到的元素进行自动化测试等操…...

编程日记 2025/7/15 1:30:59

Android一个APP里面最少有几个线程

Android应用启动时，默认会创建一个进程，该进程中最少包含5个系统自动创建的线程，具体如下： Main线程（主线程/UI线程）负责处理用户交互、UI更新等核心操作，所有与界面相关的逻辑必须在此线程执行。若在此线程执行耗时操作（如网络请求），会导致界面卡顿甚至触发ANR（应…...

编程日记 2025/7/15 19:05:11

DML 数据操纵语言学习笔记

一、DML 核心概念体系 1.1 语言定位与边界 DML（Data Manipulation Language）作为 SQL 三大核心语言之一，专注于数据行级操作，区别于 DDL（结构定义）和 DCL（权限控制）。其核心指令包…...

编程日记 2025/7/15 22:24:31

7-Zip 功能介绍

7-Zip 是一款开源、高效的文件压缩与解压缩工具，支持多种格式，以高压缩率和灵活性著称。以下是其核心功能： 多格式支持压缩 / 解压：支持 7z（默认格式，压缩率极高）、ZIP、RAR、GZIP、BZIP2、TAR…...

编程日记 2025/7/16 17:28:52

《基于python游戏设计与实现》开题报告

个人主页：@大数据蟒行探索者一、研究背景、目的及意义（一）研究背景游戏的普及与成功：随着智能手机的普及和网络技术的发展，手机游戏产业逐渐成熟，成为娱乐文化产业的重要组成部分。《开心消消乐》作为一款休闲类游戏，自上线以来凭借其简单易上手的玩法和丰富的…...

编程日记 2025/7/16 9:47:19

鸿蒙学习笔记（3）-像素单位、this指向问题、RelativeContainer布局、@Style装饰器和@Extend装饰器

一、像素单位物理像素：用px表示。逻辑像素：在布局的时候，底层针对物理像素和屏幕尺寸关系进行转化的中间层。分辨率：代表在屏幕上到底布局了多少了像素点（发光点) 官方同时也提供了相关单位，在开发中…...

编程日记 2025/7/11 22:45:02

Selenium之简介

Selenium简介首先，让我们看看官网是怎么定义的 Selenium是一个支持web浏览器自动化的一系列工具和库的综合项目，提供了扩展来模拟用户和浏览器的交互，用于扩展浏览器分配的分发服务器；用于W3C WebDriver规范的基础架构其实&a…...

编程日记 2025/7/15 1:19:59

使用Ollama(自定义安装位置)与RagFlow构建本地知识库

目录 1. 为什么不直接使用网页版DeepSeek?2. 如何实现网页版DeepSeek不能实现的需求?3. 目标效果预览4. 为什么要使用RAG技术?RAG和模型微调的区别?5. 什么是Embedding?为什么需要“Embedding模型”?6. 本地部署全流程6.1 下载ollama，通过olama将DeepSeek模型…...

编程日记 2025/7/15 1:10:44

基于ssm的医院预约挂号系统

编程日记 2025/7/20 1:38:57

先装less npm install less less-loader --save-dev 然后将该 loader 添加到 webpack 的配置中去，例如： webpack.config.js module.exports {module: {rules: [{test: /\.less$/i,use: [// compiles Less to CSSstyle-loader,css-loader,less-loade…...

编程日记 2025/7/16 20:19:56

DeepSeek概述

一、DeepSeek概述 1.1 DeepSeek是什么 DeepSeek是一家专注通用人工智能（AGI，Artificial General Intelligence）的中国科技公司，主攻大数据研发与应用。DeepSeek-R1是其开源的推理模型，擅长处理复杂任务且可免费商用…...

编程日记 2025/7/18 19:00:51

生成模型速通（Diffusion，VAE，GAN）

基本概念参考视频https://www.bilibili.com/video/BV1re4y1m7gb/?spm_id_from333.337.search-card.all.click&vd_sourcef04f16dd6fd058b8328c67a3e064abd5 生成模型其实是主要是依赖概率分布，对输入特征的概率密度函数建模隐空间（latent space)…...

编程日记 2025/7/15 20:22:11

linux/android 如何获取当前系统启动时长

uptime 指令获取 trinket:/ # uptime12:03:31 up 3 min, 0 users, load average: 1.02, 0.68, 0.29...

编程日记 2025/6/28 1:48:02

Elasticsearch客户端工具初探--kibana

1 Kibana简介 Kibana是Elastic Stack（ELK）中的可视化工具，用于对Elasticsearch中存储的数据进行搜索、分析和可视化展示。它提供了直观的Web界面，支持日志分析、业务监控、数据探索等功能，广泛应用于运维监控、安全分析…...

编程日记 2025/7/15 19:53:44

深克隆和浅克隆（建造者模式，内含简版）

让我们来看一个例子： 设计一个客户类Customer，其中客户地址存储在地址类Address中，用浅克隆和深克隆分别实现Customer对象的复制并比较这两种克隆方式的异同。代码实现 Customer类和Address类都是实现的Java 内置的 java.lang.Cloneable …...

编程日记 2025/7/16 13:10:18

吴恩达机器学习笔记复盘（十二）逻辑回归的梯度下降和拟合问题

梯度下降算法推导过程一、逻辑回归模型基础逻辑回归用于二分类问题，其假设函数为sigmoid函数： 其中，是模型参数向量，是特征向量。输出表示样本属于正类的概率。二、损失函数逻辑回归的损失函数采用对数损失（交…...

编程日记 2025/7/20 1:20:38

OSPF五种报文分析（仅部分比较重要的）

OSPF五种报文分别是： hello报文，DBD数据库描述报文，LSR链路状态请求报文，LSU链路状态更新报文，LSACK链路状态确认包以下是这五种报文的详细解读： 1. Hello报文作用： 用于邻居的发现、建立和…...

编程日记 2025/7/14 21:23:41

Ubuntu 22.04 二进制安装单节点 MySQL

Ubuntu 22.04 二进制安装 MySQL LTS（长期支持版）完整教程 MySQL LTS 版本选择： 目前 MySQL 8.4.4 是长期支持（LTS）版本，持续更新并保持稳定。下载版本： 你也可以在 MySQL 官方网站确认最新稳…...

编程日记 2025/7/16 17:49:41

python处理音频相关的库

1 音频信号采集与播放 pyaudio import sys import pyaudio import wave import timeCHUNK 1024 FORMAT pyaudio.paInt16 CHANNELS 1#仅支持单声道 RATE 16000 RECORD_SECONDS 3#更改录音时长#录音函数，生成wav文件 def record(file_name):try:os.close(file_…...

编程日记 2025/7/18 7:39:58

python+ffmpeg给音频添加背景音乐

说明： 我希望用python，将name.mp3这段录音文件，添加背景音乐，bg.mp3，然后生成新的文件 step1: 添加依赖 pip install pydubstep2:下载ffmpeg 1.打开windows powershell ，管理员运行 2.winget install ff…...

编程日记 2025/7/16 12:38:27

《TypeScript 面试八股：高频考点与核心知识点详解》

“你好啊！能把那天没唱的歌再唱给我听吗？ ” 前言因为主包还是主要学习js，ts浅浅的学习了一下，在简历中我也只会写了解，所以我写一些比较基础的八股，如果是想要更深入的八股的话还是建议找别人的。 Ts基…...

编程日记 2025/7/16 20:32:56

鸡生蛋还是蛋生鸡？基于python的CCM因果关系计算

文章目录前言一、安装二、代码1.全部代码2.结果展示总结前言因果推断在科学研究中起着重要的作用，尤其是在复杂系统中，例如生态学、气候学、经济学等领域。在这些领域中，了解变量之间的因果关系可以帮助我们更好地理解系统的动态行为和相互作用。传统的相关性分析并不足以…...

编程日记 2025/7/16 20:14:47

PyBluez2 的详细介绍、安装指南、使用方法及配置说明

PyBluez2：Python 蓝牙开发的核心库一、PyBluez2 简介 PyBluez2 是 Python 的开源蓝牙编程库，支持蓝牙 2.0、BLE（低功耗蓝牙）和传统蓝牙协议栈的开发。它提供了对蓝牙硬件适配器的底层控制，适用于设备发现、配对、数…...

编程日记 2025/7/19 16:26:30

鸿蒙HarmonyOS NEXT之无感监听

鸿蒙中存在一些无感监听，这些监听经过系统API封装使用很简单，但是对实际业务开发中有很重要，例如埋点业务、数据统计、行为上报、切面拦截等。 Navigation的页面切换在鸿蒙中Navigation被用来作为路由栈进行页面跳转，如果你想知…...

编程日记 2025/7/12 6:01:44

质检LIMS系统在食品生产加工企业的应用如何保证食品生产企业的安全

在食品生产加工领域，质量安全是贯穿全产业链的生命线。随着《食品安全法》对全过程追溯要求的深化，传统实验室管理模式已难以满足高效、精准的质量管控需求。质检实验室信息管理系统（LIMS）作为数字化升级的核心工具，正…...

编程日记 2025/7/15 12:09:11

相关文章：