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: 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/753823.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ASUS/华硕幻13 2022 GV301R系列 原厂Windows11系统

ASUS/华硕幻13 2022 GV301R系列 原厂Windows11系统

安装后恢复到您开箱的体验界面&#xff0c;带原机所有驱动和软件&#xff0c;包括myasus mcafee office 奥创等。 最适合您电脑的系统&#xff0c;经厂家手调试最佳状态&#xff0c;性能与功耗直接拉满&#xff0c;体验最原汁原味的系统。 原厂系统下载网址&#xff1a;http:…
阅读更多...
pdf合并，这三种方法学会了吗？

pdf合并，这三种方法学会了吗？

在信息爆炸的时代&#xff0c;PDF文档凭借其跨平台、不易修改的特性&#xff0c;成为了我们工作和学习中不可或缺的一部分。然而&#xff0c;当面对多个PDF文件需要合并成一个完整的文档时&#xff0c;许多人可能会感到头疼。今天&#xff0c;就让我们一起来探讨三种高效的PDF合…
阅读更多...
【python】socket通信代码解析

【python】socket通信代码解析

目录 一、socket通信原理 1.1 服务器端 1.2 客户端 二、socket通信主要应用场景 2.1 简单的服务器和客户端通信 2.2 并发服务器 2.3 UDP通信 2.4 文件传输 2.5 HTTP服务器 2.6 邮件发送与接收 2.7 FTP客户端 2.8 P2P文件共享 2.9 网络游戏 三、python中Socket编…
阅读更多...
戴尔md3400存储控制器脱机故障 电池故障处理

戴尔md3400存储控制器脱机故障 电池故障处理

看了一下网上关于DELL MD系列存储故障处理的文档还是比较少的&#xff0c;最近处理了一些关于MD系列存储的问题&#xff0c;稍微整理整理就分享一下&#xff0c;各位喜欢摸索的朋友可以稍稍做些参考&#xff0c;当然如果想寻求外援的也可以快速的找到合适的人。以便安全又快捷的…
阅读更多...
SBTI（科学碳目标）认证是什么？

SBTI（科学碳目标）认证是什么？

SBTI认证&#xff0c;全称为“科学基础目标设置倡议”&#xff08;Science-Based Targets initiative&#xff09;认证&#xff0c;是一种广泛认可的企业可持续发展标准。以下是关于SBTI认证的详细解释&#xff1a; 一、认证目标 SBTI认证旨在推动企业采取可持续的经营实践&a…
阅读更多...
Android进阶之路 - DialogFragment有没有了解的必要？

Android进阶之路 - DialogFragment有没有了解的必要？

几个月前写到了弹框业务&#xff0c;以前经常用Dialog、ButtomDialog 、popupWindow 组件&#xff0c;为了契合项目结构参考了原有的 DialogFragment 组件&#xff0c;特此予以记录 我一般在项目中写弹框组件的话&#xff0c;主要用到 alertDialog、popupWindow 组件&#xff0…
阅读更多...
S32K3 工具篇2：如何在S32DS中使用Segger JLINK下载

S32K3 工具篇2：如何在S32DS中使用Segger JLINK下载

S32K3 工具篇2&#xff1a;如何在S32DS中使用Segger JLINK下载 一&#xff0c; S32DS中JLINK下载1.1 Segger JLINK 驱动1.2 S32DS JLINK驱动路径配置1.3 S32DS JLINK debug configuration1.4 S32DS JLINK debug S32K3板子结果 二&#xff0c; JLINK驱动实现S32K344代码下载2.1 …
阅读更多...
【Sublime】Sublime Text 中运行终端

【Sublime】Sublime Text 中运行终端

Sublime Text 本身并不是一个终端仿真器&#xff0c;可以使用插件来在 Sublime Text 中集成终端功能。最常用的插件之一是“Terminal”。 使用“Terminal”插件在 Sublime Text 中启动终端 以下是安装和使用该插件的步骤&#xff1a; 安装 Package Control&#xff1a; 如果你…
阅读更多...
【IJCAI2024】LeMeViT: Efficient Vision Transformer with Learnable Meta Tokens

【IJCAI2024】LeMeViT: Efficient Vision Transformer with Learnable Meta Tokens

【IJCAI2024】LeMeViT: Efficient Vision Transformer with Learnable Meta Tokens for Remote Sensing Image Interpretation 论文&#xff1a;https://arxiv.org/abs/2405.09789 代码&#xff1a;https://github.com/ViTAE-Transformer/LeMeViT 由于相邻像素和图像块之间的高…
阅读更多...
Thermo Fisher Scientific赛默飞检测扫描架IPC电路板维修WAH402290

Thermo Fisher Scientific赛默飞检测扫描架IPC电路板维修WAH402290

美国Thermo Fisher赛默飞世尔光谱仪IS10 IS5光谱仪主板维修iCAP6000/iCAP7000/iCAP7400&#xff1b;热电质朴分析仪电路板维修 公司仪器维修设备备有三相交流电源,变频电源&#xff0c;无油空压气源&#xff0c;标准化的维修平台、电子负载&#xff0c;耐压测试仪、老化台车和各…
阅读更多...
云动态摘要 2024-06-28

云动态摘要 2024-06-28

给您带来云厂商的最新动态&#xff0c;最新产品资讯和最新优惠更新。 最新优惠与活动 [新客专享]WeData 限时特惠 腾讯云 2024-06-21 数据分类分级管理&#xff0c;构建数据安全屏障 &#xff0c;仅需9.9元&#xff01; 云服务器ECS试用产品续用 阿里云 2024-04-14 云服务器…
阅读更多...
量化投资 日周月报 2024-06-28

量化投资 日周月报 2024-06-28

文章 深度学习在量化交易中的应用：在BigQuant量化交易平台的文章中，探讨了深度学习在量化交易中，特别是在因子挖掘方面的应用。文章提到，随着传统线性模型的潜力逐渐枯竭，非线性模型逐渐成为量化交易的主要探索方向。深度学习因其对非线性关系的拟合能力，在量化交易中展现…
阅读更多...
华为面试题及答案——机器学习(二)

华为面试题及答案——机器学习(二)

21. 如何评价分类模型的优劣? （1）模型性能指标 准确率（Accuracy）： 定义：正确分类的样本数与总样本数之比。适用：当各类样本的数量相对均衡时。精确率（Precision）： 定义：预测为正类的样本中实际为正类的比例。适用：当关注假阳性错误的成本较高时（例如垃圾邮件检测…
阅读更多...
firewalld(3)zone配置

firewalld(3)zone配置

简介 前面文章我们已经介绍了firewalld的安装，配置文件介绍、简单的规则查询，本篇文章主要介绍zone的配置。前面我们介绍了firewalld默认的zone和不同zone的功能，下面我们就直接进入zone的具体配置使用。 配置zone的方式 图形配置工具 firewall-config： 这是一个图形…
阅读更多...
SAP PP学习笔记24 - 生产订单（制造指图）的创建

SAP PP学习笔记24 - 生产订单（制造指图）的创建

上面两章讲了生产订单的元素。 SAP PP学习笔记22 - 生产订单&#xff08;制造指图&#xff09;的元素1-CSDN博客 SAP PP学习笔记23 - 生产订单&#xff08;制造指图&#xff09;的元素2 - 决济规则(结算规则)-CSDN博客 这一章讲生产订单的创建。比如 - 生产订单的流程&#…
阅读更多...
Unity Animator 运行时修改某个动画状态的播放速度

Unity Animator 运行时修改某个动画状态的播放速度

1.添加动画参数&#xff0c;选择需要动态修改速度的动画状态 2.在属性面板种设置速度倍速参数
阅读更多...
three.js场景三元素

three.js场景三元素

three.js是一个基于WebGL的轻量级、易于使用的3D库。它极大地简化了WebGL的复杂细节&#xff0c;降低了学习成本&#xff0c;同时提高了性能。 three.js的三大核心元素&#xff1a; 场景&#xff08;Scene&#xff09; 场景是一个三维空间&#xff0c;是所有物品的容器。可以将…
阅读更多...
Java集合实例

Java集合实例

一、什么是Java集合实例&#xff1a; 指的是在 Java 程序中创建和使用的集合对象&#xff0c;这些对象用于存储和操作数据。Java 集合框架提供了一系列的接口和实现类&#xff0c;用于管理不同类型的数据集合。 二、Java集合的主要实例类型&#xff1a; 1. List&#xff08;列…
阅读更多...
uni-app uni-data-picker级联选择器无法使用和清除选中的值

uni-app uni-data-picker级联选择器无法使用和清除选中的值

出现问题&#xff1a; 使用点击右边的叉号按钮无法清除已经选择的uni-data-picker值 解决办法&#xff1a; 在uni-app uni-data-picker使用中&#xff0c;要添加v-model&#xff0c;v-model在官网的示例中没有体现&#xff0c;但若不加则无法清除。 <uni-data-picker v-m…
阅读更多...
激光与相机融合标定汇总：提升融合算法的精度与可靠性（附github地址）

激光与相机融合标定汇总：提升融合算法的精度与可靠性（附github地址）

前言 随着科技的飞速发展&#xff0c;激光技术与相机技术的融合已成为推动智能化影像发展的重要力量。这种融合不仅提高了成像的精度和效率&#xff0c;还为相关行业带来了革命性的变革。在这篇博客中&#xff0c;我们将深入探讨激光与相机融合标定的原理及其在各个领域的应用…
阅读更多...
最新文章

Copyright @ 2022~2023