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

css做旋转星球可举一反三

news 2025/11/4 0:03:42

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8" /> <title>旋转的星球</title> 
<style type="text/css">.box {/*position: relative;*/position: absolute;width: 139px;height: 139px;border: 1px solid #348DE8;border-radius: 50%;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}.sunline {height: 93px;width: 93px;border-radius: 50%;/*display: flex;*//* 设置边框宽度 *//*border: 19px solid #ffffff;*//* 设置背景渐变 */background-image: linear-gradient(180deg, rgba(109, 158, 254, 0.1) 0%, rgba(3, 94, 240, 0.1) 100%);/* 设置背景的边缘，确保渐变不会超出边框 */background-clip: border-box;/* 背景的填充区域包括边框，确保边框也有渐变效果 */padding-top: 19px;padding-right: 19px;padding-bottom: 19px;padding-left: 19px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}.earthline1 {position: absolute;right: 0;top: 50%;width: 139px;height: 139px;margin: -69.5px -0px 0 0;border-radius: 50%;transform: rotate(125deg);display: flex;
}.earthline2 {position: absolute;right: 0;top: 50%;width: 139px;height: 139px;margin: -69.5px -0px 0 0;border: 1px solid rgb(52 141 232 / 0%);border-radius: 50%;transform: rotate(230deg);display: flex;
}
.earthline3 {position: absolute;right: 0;top: 50%;width: 139px;height: 139px;margin: -69.5px -0px 0 0;border: 1px solid rgb(52 141 232 / 0%);border-radius: 50%;transform: rotate(340deg);display: flex;
}
.sun {width: 93.6px;height: 93.26px;margin: auto;font-size: 14px;font-weight: bold;line-height: 93.26px;text-align: center;color: #FFFFFF;background: linear-gradient(180deg, #6D9EFE 0%, #035EF0 100%);border-radius: 50%;//box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
}.box .moon2 {position: absolute;left: 0;top: 50%;width: 6px;height: 6px;margin: -3px 0 0 -3px;background: linear-gradient(180deg, #6D9EFE 0%, #035EF0 100%);border-radius: 50%;
}.box .moon1 {position: absolute;left: 0;top: 50%;width: 6px;height: 6px;margin: -3px 0 0 -3px;background: linear-gradient(180deg, #6D9EFE 0%, #035EF0 100%);border-radius: 50%;
}.box .moon {position: absolute;left: 0;top: 50%;width: 6px;height: 6px;margin: -3px 0 0 -3px;background: linear-gradient(180deg, #6D9EFE 0%, #035EF0 100%);border-radius: 50%;
}
.max-box{width:218px;height:218px;border:6px solid #E9F1FE;border-radius:50%;position: relative;}
.wmd1{position: absolute;right: 0;top: 50%;width:218px;height:218px;margin: -109px -0px 0 0;border-radius: 50%;transform: rotate(230deg);display: flex;
}
.wmd2{position: absolute;right: 0;top: 50%;width:218px;height:218px;margin: -109px -0px 0 0;border-radius: 50%;transform: rotate(340deg);display: flex;
}
.wmd3{position: absolute;right: 0;top: 50%;width:218px;height:218px;margin: -109px -0px 0 0;border-radius: 50%;transform: rotate(125deg);display: flex;
}
.wmd1 .child{position: absolute;left: 0;top: 50%;width: 63px;height: 63px;margin: -31.5px 0 0 -31.5px;background: #E6EFFE;border-radius: 50%;text-align:center;
}
.wmd2 .child{position: absolute;left: 0;top: 50%;width: 63px;height: 63px;margin: -31.5px 0 0 -31.5px;background: #E6EFFE;border-radius: 50%;text-align:center;
}
.wmd3 .child{position: absolute;left: 0;top: 50%;width: 63px;height: 63px;margin: -31.5px 0 0 -31.5px;background: #E6EFFE;border-radius: 50%;text-align:center;
}
.child-count{font-size: 14px;color: #6386F2;
}
.child-name{font-size: 14px;
font-weight: bold;
color: #6386F2;
}
.item-child{display: flex;flex-direction: column;align-items: center;justify-content: center;width: 63px;height: 63px;}
.wmd1 .item-child{transform: rotate(131deg);
}
.wmd2 .item-child{transform: rotate(19deg);
}
.wmd3 .item-child{transform: rotate(235deg);
}
@keyframes rotate {100% {transform: rotate(360deg);}
}</style> </head> <body> <div class="max-box"> <div class="box"> <div class="sunline"> <div class="sun">海关缉私局</div> </div> <div class="earthline1"> <div class="moon"></div> </div> <div class="earthline2"> <div class="moon1"></div> </div> <div class="earthline3"> <div class="moon2"></div> </div> </div> <div class="wmd1"><div class="child"><div class="item-child"><div class="child-name">检察院 </div><div class="child-count">3456</div></div></div> </div><div class="wmd2"><div class="child"><div class="item-child"><div class="child-name">检察院 </div><div class="child-count">3456</div></div></div> </div><div class="wmd3"><div class="child"><div class="item-child"><div class="child-name">检察院 </div><div class="child-count">3456</div></div></div> </div></div> <strong>【简要介绍】</strong> <p>旋转的星球主要通过rotate()旋转函数来实现。实际上，蓝色的地球和黑色的月球并没有发生旋转，只是其父级旋转形成的视觉上的旋转效果</p>  </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>旋转的星球</title><style type="text/css">.box {transform: scale(0.5);position: relative;padding: 1px;height: 300px;width: 300px;}.sunline {position: relative;height: 400px;width: 400px;border: 2px solid black;border-radius: 50%;margin: 50px 0 0 50px;display: flex;//animation: rotate 10s infinite linear;}
.earthline1{position: absolute;right: 0;top: 50%;height: 200px;width: 200px;margin: -100px -100px 0 0;border: 1px solid black;border-radius: 50%;transform: rotate(145deg);display: flex;}.earthline2{position: absolute;right: 0;top: 50%;height: 200px;width: 200px;margin: -100px -100px 0 0;border: 1px solid black;border-radius: 50%;transform: rotate(245deg);display: flex;}.sun {height: 100px;width: 100px;margin: auto;background-color: red;border-radius: 50%;box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;}.earthline {position: absolute;right: 0;top: 50%;height: 200px;width: 200px;margin: -100px -100px 0 0;border: 1px solid black;border-radius: 50%;display: flex;//animation: rotate 2s infinite linear;}.earthline .earth {margin: auto;height: 50px;width: 50px;background-color: blue;border-radius: 50%;}.earthline .moon {position: absolute;left: 0;top: 50%;height: 20px;width: 20px;margin: -10px 0 0 -10px;background-color: black;border-radius: 50%;}.earthline1 .earth {margin: auto;height: 50px;width: 50px;background-color: blue;border-radius: 50%;}.earthline1 .moon {position: absolute;left: 0;top: 50%;height: 20px;width: 20px;margin: -10px 0 0 -10px;background-color: black;border-radius: 50%;}.earthline2 .earth {margin: auto;height: 50px;width: 50px;background-color: blue;border-radius: 50%;}.earthline2 .moon {position: absolute;left: 0;top: 50%;height: 20px;width: 20px;margin: -10px 0 0 -10px;background-color: black;border-radius: 50%;}@keyframes rotate {100% {transform: rotate(360deg);}}</style>
</head>
<body>
<div class="box"><div class="sunline"><div class="sun"></div><div class="earthline"><div class="earth"></div><div class="moon"></div></div><div class="earthline1"><div class="earth"></div><div class="moon"></div></div><div class="earthline2"><div class="earth"></div><div class="moon"></div></div></div>
</div>
<strong>【简要介绍】</strong>
<p>旋转的星球主要通过rotate()旋转函数来实现。实际上，蓝色的地球和黑色的月球并没有发生旋转，只是其父级旋转形成的视觉上的旋转效果</p>
</body>
</html>

css做旋转星球可举一反三

<!DOCTYPE html> <html lang"en"><head> <meta charset"UTF-8" /> <title>旋转的星球</title> <style type"text/css">.box {/*position: relative;*/position: absolute;width: 139px;height: 139p…...

编程日记 2024/7/3 4:37:56

AcWing 1256：扩展二叉树

【题目来源】https://www.acwing.com/problem/content/1258/【题目描述】由于先序、中序和后序序列中的任一个都不能唯一确定一棵二叉树，所以对二叉树做如下处理，将二叉树的空结点用补齐，如图所示。我们把这样处理后的二叉树称为原二叉树…...

编程日记 2024/7/3 4:36:54

三维家：SaaS的IT规模化降本之道｜OceanBase 《DB大咖说》（十一）

OceanBase《DB大咖说》第 11 期，我们邀请到了三维家的技术总监庄建超，来分享他对数据库技术的理解，以及典型 SaaS 场景在数据库如何实现规模化降本的经验与体会。庄建超，身为三维家的技术总监，独挑大梁，负…...

编程日记 2024/7/3 4:34:51

ai智能语音机器人是如何影响客户体验的?电销机器人部署

随着人工智能技术的进步，越来越多的企业在寻求如何将人工智能技术融合到现有的商业模式上，进而实现自动化、智能化。在通信行业大量使用智能语音机器人、聊天机器人、客服机器人时，它能和“客户体验”并驾齐驱吗，还是可以让客户体…...

编程日记 2024/7/3 4:33:50

vue3使用v-html实现文本关键词变色

首先看应用场景这有一段文本内容，是项目的简介，想要实现将文本中的关键词进行变色处理有如下关键词实现思路遍历文本内容，找到关键词，并使用某种方法更改其字体样式。经过搜寻资料决定采用v-html实现，但是v-h…...

编程日记 2024/7/3 4:29:47

C#面：举列 a=10,b=15，在不用第三方变量的前提下，把a,b的值互换

要在不使用第三方变量的前提下交换a和b的值，可以使用异或运算。异或运算的特性是，对于两个相同的数进行异或运算，结果为0；对于任意数与0进行异或运算，结果为该数本身。因此，可以通过多次异或运算来实现变量…...

编程日记 2024/7/3 4:27:45

编写动态库

1.创建库.c .h文件 2.编写Makefile文件 3.make之后形成.so文件 4.make output,形成mylib 5.把mylib拷贝到test里面 mv mylib /test 6.编译 gcc main.c -I mylib/include -L mylib/lib -lmymethod形成a.out 但是直接执行会出现以下问题很显然没有找到动态库 7.解决加载找不…...

编程日记 2024/7/3 4:26:43

记一次阿里云服务器java应用无法响应且无法远程连接的问题排查

问题表现 java服务无响应，无法远程链接到服务器。今天中午12点多，应用直接崩溃。后续进入到服务器，发现java进程都不在了， 排查过程先安装atop工具安装、配置并使用atop监控工具等下次再出现时看相关时间点日志&#xff…...

编程日记 2024/7/3 4:25:40

雷池WAF+Modsecurity安装防护及系统加固

君衍. 一、雷池WAF1、什么是雷池2、什么是WAF3、雷池的功能4、WAF部署架构5、整体检测流程二、雷池WAF环境依赖1、查看本地CPU架构2、Docker安装2.1 卸载旧版本2.2 安装yum-utils工具包2.3 设置镜像仓库2.4 安装docker2.5 启动docker并查看版本 3、Docker Compose安装3.1 卸载…...

编程日记 2024/7/3 4:23:38

【Python】已解决：SyntaxError: positional argument follows keyword argument

文章目录一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项已解决：SyntaxError: positional argument follows keyword argument 一、分析问题背景在Python编程中，当我们在调用函数时混合使用位置参数（p…...

编程日记 2024/7/3 4:22:37

leetcode-20-回溯-切割、子集

一、[131]分割回文串给定一个字符串 s，将 s 分割成一些子串，使每个子串都是回文串。返回 s 所有可能的分割方案。示例: 输入: "aab" 输出: [ ["aa","b"], ["a","a","b"] ] 分析&…...

编程日记 2024/7/3 4:18:33

利用深度学习模型进行语音障碍自动评估

语音的产生涉及器官的复杂协调，因此，语音包含了有关身体各个方面的信息，从认知状态和心理状态到呼吸条件。近十年来，研究者致力于发现和利用语音生物标志物——即与特定疾病相关的语音特征，用于诊断。随着人工智能&…...

编程日记 2024/7/3 4:16:31

TP8 JS(html2canvas) 把DIV内容生成二维码并与背景图、文字组合生成分享海报

方法一：前端JS生成(推荐) 注意： 1.这个网页只能截图图片效果代码，其它任何html效果都不能有，不然截图就不准确 2.如果要生成的图片DIV内容中引用了第三个方的图片，就是不使用同一个域名下的图片，需要把后…...

编程日记 2024/7/3 4:13:27

计算机科学中的接口（Interface）介绍

计算机科学中的接口（Interface）介绍计算机科学中，接口是一个广泛的概念，在不同上下文中有不同含义： 1.任何两电路或设备间的连接电路，用于连接CPU与内存、CPU与外设之间。这是一个重要的硬件层面的接口概…...

编程日记 2024/7/3 4:12:26

大创项目推荐题目：基于深度学习卷积神经网络的花卉识别 - 深度学习机器视觉

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是基…...

编程日记 2024/7/3 4:11:25

黑芝麻科技A1000简介

文章目录 1. A1000 简介2. 感知能力评估3. 竞品对比4. 系统软件1. A1000 简介...

编程日记 2024/7/3 4:10:23

详解C语言分支与循环语句

分支语句 if elseswitch 循环语句 whilefordo while goto语句文章目录 1.什么是语句2.分支语句（选择结构）2.1 if语句2.1.1 悬空else2.1.3 练习 2.2 switch语句2.2.1 在switch语句中的break2.2.2 default子句 3.循环语句3.1 while循环3.1.1 while语句中…...

编程日记 2024/7/3 4:08:21

Python商务数据分析知识专栏（五）——Python数据分析的应用③使用Pandas进行数据预处理

Python商务数据分析知识专栏（五）——Python数据分析的应用③使用Pandas进行数据预处理使用Pandas进行数据预处理1.合并数据2.清洗数据3.标准化数据4.转换数据使用Pandas进行数据预处理 1.合并数据 2.清洗数据 3.标准化数据 4.转换数据...

编程日记 2024/7/3 4:06:19

Nosql期末复习

mongodb基本常用命令（只要掌握所有实验内容就没问题） 上机必考，笔试试卷可能考： 1.1 数据库的操作 1.1.1 选择和创建数据库 （1）use dbname 如果数据库不存在则自动创建，例如，以下…...

编程日记 2024/7/3 4:05:18

Pytest+Allure+Yaml+PyMsql+Jenkins+Gitlab接口自动化（四）Jenkins配置

一、背景 Jenkins（本地宿主机搭建） 拉取GitLab(服务器)代码到在Jenkins工作空间本地运行并生成Allure测试报告二、框架改动点框架主运行程序需要先注释掉运行代码（可不改，如果运行报allure找不到就直接注释掉） …...

编程日记 2024/7/3 4:03:16

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

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

编程新知 2025/10/25 17:23:41

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/11/3 19:41:52

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程目录 Web 项目 Docker 化部署概述Dockerfile 详解构建阶段生产阶段构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）&#xff1a…...

编程新知 2025/8/12 16:28:43

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。一、useAsyncError 用途处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/10/27 7:52:30

【Linux】C语言执行shell指令

在C语言中执行Shell指令在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/10/22 23:35:38

Objective-C常用命名规范总结

【OC】常用命名规范总结文章目录【OC】常用命名规范总结1.类名（Class Name)2.协议名（Protocol Name)3.方法名（Method Name)4.属性名（Property Name）5.局部变量/实例变量（Local / Instance Variables&…...

编程新知 2025/10/5 6:41:51

django filter 统计数量按属性去重

在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...

编程新知 2025/9/29 21:28:27

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...

编程新知 2025/7/20 15:22:30

相关文章：