css做旋转星球可举一反三

news2025/1/10 2:20:48

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Total Uninstall安装及卸载软件

Total Uninstall安装及卸载软件

Total Uninstall 的独特之处在于通过其安装的软件可以完整监控到新增或更改的注册表、文件、服务&#xff0c;可一键卸载。但常规的“360软件管家”无法做到以上内容。 借助该机制可用来无限刷新软件试用许可。 1.Total Uninstall 安装第三方软件 点击图中的“安装”&#xf…
阅读更多...
vue2中vuedraggable设置部分元素不可拖拽，不可移动

vue2中vuedraggable设置部分元素不可拖拽，不可移动

文章目录 前言1、版本2、vuedraggable页面的具体使用3.核心(1) move官网说明(2) 注意点&#xff1a;(3) onDraggableMove方法 总结 前言 需求&#xff1a;左边是复选框&#xff0c;右边是选中的数据&#xff0c;编辑传入的数据不可拖拽&#xff0c;不可移动&#xff08;其实还…
阅读更多...
【算法】数组-基础知识与应用

【算法】数组-基础知识与应用

一.基础理论 数组是存放在连续内存空间上的相同类型数据的集合。数组可以方便的通过下标索引的方式获取到下标对应的数据。 数组下标都是从0开始的。数组内存空间的地址是连续的 因为数组在内存空间的地址是连续的&#xff0c;所以我们在删除或者增添元素的时候&#xff0c…
阅读更多...
jieba--《红楼梦》章节分卷并计算TF-IDF值（超详细）

jieba--《红楼梦》章节分卷并计算TF-IDF值（超详细）

目录 大致步骤&#xff1a; 任务1&#xff1a; 将红楼梦 根据卷名 分隔成 卷文件 红楼梦txt&#xff1a; 红楼梦卷头&#xff1a; 红楼梦章节分卷&#xff1a; 任务2&#xff1a;对每个卷进行分词&#xff0c;并删除包含停用词的内容 1.遍历所有卷的内容&#xff0c;并添…
阅读更多...
没有思考过 Embedding，不足以谈 AI

没有思考过 Embedding，不足以谈 AI

在当今的人工智能&#xff08;AI&#xff09;领域&#xff0c;Embedding 是一个不可或缺的概念。如果你没有深入理解过 Embedding&#xff0c;那么就无法真正掌握 AI 的精髓。接下来&#xff0c;我们将深入探讨 Embedding 的基本概念。 1. Embedding的基本概念 1.1 什么是 Emb…
阅读更多...
ffmpeg使用mjpeg把yuvj420p编码为jpg图像

ffmpeg使用mjpeg把yuvj420p编码为jpg图像

version #define LIBAVUTIL_VERSION_MAJOR 58 #define LIBAVUTIL_VERSION_MINOR 12 #define LIBAVUTIL_VERSION_MICRO 100 note 1. 通过*.jpg推测时&#xff0c;out_fmt为image2&#xff0c;打开*.jpg文件时&#xff0c;in_fmt为image2 但是out_fmt为image2时&#xff…
阅读更多...
冶金工业5G智能工厂工业物联数字孪生平台，推进制造业数字化转型

冶金工业5G智能工厂工业物联数字孪生平台，推进制造业数字化转型

冶金工业5G智能工厂工业物联数字孪生平台&#xff0c;推进制造业数字化转型。传统生产方式难以满足现代冶金工业的发展需求&#xff0c;数字化转型成为必然趋势。通过引入5G、工业物联网和数字孪生等先进技术&#xff0c;冶金工业可以实现生产过程智能化、高效化和绿色化&#…
阅读更多...
【Echarts】散点图 制作 气泡 类型图表

【Echarts】散点图 制作 气泡 类型图表

目录 需求主要代码效果展示注 需求 需参照设计图画出对应图表 主要代码 /**** 数据 ****/ this.dataList [...Array(8).keys()].map((item) > {return {ywlxmc: 业务类型 (item 1),sl: item > 4 ? 50 : 70} })/**** 气泡样式 ****/ const styleList [{offset: [56…
阅读更多...
谷粒商城实战(045集群学习-elasticsearch(ES)集群)

谷粒商城实战(045集群学习-elasticsearch(ES)集群)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第368p-第p369的内容 文章目录 简介集群健康分片新增节点水平扩容问题和解决集群结构测试集群信息 简介 不管用户发给哪个节点&#xff0c;都可以…
阅读更多...
如何断点调试opencv源码

如何断点调试opencv源码

分几个步骤&#xff1a; 1、下载opencv-4.10.0-windows.exe https://opencv.org/releases/ 2、想要调试opencv的源码&#xff0c;只需要将这两个文件拷贝到我们自己项目的可执行文件的同级目录内即可。 完成拷贝后&#xff0c;直接在vs工程中打断点F11进行单步调试&#xff…
阅读更多...
智能交通（1）——杭州交通数据集

智能交通（1）——杭州交通数据集

赛题简介 在本地赛题中&#xff0c;参赛团队需要在平台提供的仿真交通场景下&#xff0c;通过算法模型驱动交通信号灯&#xff0c;以在各种交通状况&#xff08;高峰期、雨天等&#xff09;下都能最大程度地服务车辆&#xff0c;使其在模拟环境中获得综合最大得分。 数据集 …
阅读更多...
基于 SpringBoot + Vue 的图书购物商城项目

基于 SpringBoot + Vue 的图书购物商城项目

本项目是一个基于 SpringBoot 和 Vue 的图书购物商城系统。系统主要实现了用户注册、登录&#xff0c;图书浏览、查询、加购&#xff0c;购物车管理&#xff0c;订单结算&#xff0c;会员折扣&#xff0c;下单&#xff0c;个人订单管理&#xff0c;书籍及分类管理&#xff0c;用…
阅读更多...
subline设置打开文件重启一个新的窗口

subline设置打开文件重启一个新的窗口

问题 打开文件后&#xff0c;用的是同一个窗口的子tab页面 想要打开一个新的窗口 解决 点解preferences->setting 在右边的配置文件新增一行 “open_files_in_new_window”: “always” 保存 搞定&#xff01;
阅读更多...
聊聊啥项目适合做自动化测试

聊聊啥项目适合做自动化测试

作为测试从业者&#xff0c;你是否遇到过这样的场景&#xff0c;某天公司大Boss找你谈话。 老板&#xff1a;小李&#xff0c;最近工作辛苦了 小李&#xff1a;常感谢您的认可&#xff0c;这不仅是对我个人的鼓励&#xff0c;更是对我们整个团队努力的认可。我们的成果离不开每…
阅读更多...
建筑可视化中使用云渲染的几大理由

建筑可视化中使用云渲染的几大理由

在建筑行业中&#xff0c;可视化技术已成为不可或缺的一部分。无论是设计方案的展示、施工进度的模拟&#xff0c;还是最终效果的呈现&#xff0c;建筑可视化都发挥着至关重要的作用。 建筑可视化是指通过计算机技术和图形学算法&#xff0c;将建筑设计、规划和施工过程中的数据…
阅读更多...
three.js实现雪花场景效果

three.js实现雪花场景效果

点击获取雪花图片素材 提取码:lywa // 雪花效果 import * as THREE from "three" export function getsnowEffect(th) {console.log(th, th) // this 场景var that th// 创建一个BufferGeometry对象&#xff0c;用于存储顶点数据 const geometry new THREE.Buffe…
阅读更多...
同城小商城货到付款系统源码小程序

同城小商城货到付款系统源码小程序

&#xff1a;便捷购物新选择 &#x1f680; 一、快速便捷&#xff0c;同城直达 在这个快节奏的时代&#xff0c;时间就是金钱。你是否曾因为等待快递而焦虑不安&#xff1f;现在&#xff0c;有了“同城商城货到付款小程序”&#xff0c;这一切都变得不再是问题。它专注于同城…
阅读更多...
2024年科技型中小企业申报指南

2024年科技型中小企业申报指南

01 什么是科技型中小企业 科技型中小企业是指依托一定数量的科技人员从事科学技术研究开发活动&#xff0c;取得自主知识产权并将其转化为高新技术产品或服务&#xff0c;从而实现可持续发展的中小企。 02 申请“科技型中小企业”的好处 一、政策扶持与优惠 1.税收减免&…
阅读更多...
根据肥胖类型选择减调方向收获窈窕身材

根据肥胖类型选择减调方向收获窈窕身材

我们生活中胖子很多&#xff0c;从胖到瘦的人也不少&#xff0c;但瘦了后对自己身材满意的人却是不多的&#xff0c;很多人瘦了也只是减掉了身上的赘肉而已&#xff0c;大体的身形却是没有变化的&#xff0c;因此&#xff0c;并不感到满意。因为他们本身的形体是固定的&#xf…
阅读更多...
恭喜！Apache SeaTunnel2024开源之夏学生中选名单出炉！

恭喜！Apache SeaTunnel2024开源之夏学生中选名单出炉！

经过严格的筛选&#xff0c;开源之夏组委会及导师已经选出并录取项目对应的学生&#xff0c;社区联合中科院开展的开源之夏活动也进入到了激动人心的中选公示阶段。 在这里&#xff0c;我们恭喜下面的同学&#xff0c;已成功匹配到Apache SeaTunnel社区的项目&#xff0c;即将开…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023