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>

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

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

相关文章

计算文本相似度的几种方法

计算文本相似度的几种方法

计算文本相似度的几种方法 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨一下计算文本相似度的几种方法。文本相似度在自然语言处理&#xff08…
阅读更多...
算法训练 | 动态规划Part10 | 300.最长递增子序列、674.最长连续递增序列、718.最长重复子数组

算法训练 | 动态规划Part10 | 300.最长递增子序列、674.最长连续递增序列、718.最长重复子数组

目录 300.最长递增子序列 动态规划法 674.最长连续递增序列 动态规划法 718.最长重复子数组 动态规划法 300.最长递增子序列 题目链接&#xff1a;300. 最长递增子序列 - 力扣&#xff08;LeetCode&#xff09; 文章讲解&#xff1a;代码随想录 动态规划法 “子序列是…
阅读更多...
基于java语言+springboot技术架构开发的 互联网智能3D导诊系统源码支持微信小程序、APP 医院AI智能导诊系统源码

基于java语言+springboot技术架构开发的 互联网智能3D导诊系统源码支持微信小程序、APP 医院AI智能导诊系统源码

基于java语言springboot技术架构开发的 互联网智能3D导诊系统源码支持微信小程序、APP 医院AI智能导诊系统源码 一、智慧导诊系统开发原理 导诊系统从原理上大致可分为基于规则模板和基于数据模型两类。 1、基于规则推理的方法通过人工建立症状、疾病和科室之间的对应规则实现…
阅读更多...
Java反射API详解与应用场景

Java反射API详解与应用场景

一、Java反射API简介： 一、什么是反射： 反射是一种强大的工具，它允许我们在运行时检查类、方法和字段的信息，甚至允许我们动态的调用特定类的方法或改变字段的值。编程语言中的反射机制通常用于从类、对象或方法中检索元数据，或者更特别的说，从代码本身中获取信息。这就…
阅读更多...
【51单片机入门】点亮数码管

【51单片机入门】点亮数码管

文章目录 前言仿真图如何去绘制一个数字示例代码选择某个数码管显示某个数字 示例代码总结 前言 在嵌入式系统的世界中&#xff0c;单片机扮演着至关重要的角色。51单片机&#xff0c;作为最早的微控制器之一&#xff0c;至今仍被广泛应用在各种设备中。本文将介绍如何使用51单…
阅读更多...
几种linux开机自启脚本的方法

几种linux开机自启脚本的方法

几种linux开机自启脚本的方法 1. 脚本添加到init.d目录中2. 创建服务service&#xff08;推荐&#xff09;3. /etc/profile & /etc/profile.d&#xff08;不推荐&#xff09;4. /etc/rc.local 本文以启动jenkins节点为例&#xff0c;需要持久连接&#xff0c;实现开机自启 …
阅读更多...
js或ts中对象如何循环遍历获取名字和值

js或ts中对象如何循环遍历获取名字和值

数组循环有多种方法&#xff0c;但是对象循环还是会遇到一些问题 分开获取key或value let names{name:kaka,age:12}获取key值代码&#xff1a; Object.keys(names).forEach(name>{console.log(name) })结果&#xff1a; 获取value值代码&#xff1a; Object.values(name…
阅读更多...
多地高温持续“热力”爆表 约克VRF中央空调带你清凉舒爽一夏

多地高温持续“热力”爆表 约克VRF中央空调带你清凉舒爽一夏

“出门5分钟&#xff0c;流汗2小时”,夏季高温天气&#xff0c;怎一个“热”字了得&#xff1f;6月以来&#xff0c;我国多地迎来高温“炙烤”&#xff0c;全国出现40℃以上高温的范围持续增加&#xff0c;随着中央气象台高温预警持续拉响&#xff0c;人们都很纳闷&#xff1a;…
阅读更多...
谷歌浏览器报错ERR_UNSAFF_PORT原因分析

谷歌浏览器报错ERR_UNSAFF_PORT原因分析

部署了个测试静态页&#xff0c;用了10080端口。curl访问没问题&#xff0c;chrome浏览器访问报错 ERR_UNSAFF_PORT 查了一下&#xff0c;google对于部分端口在客户端是直接拦截的。请求都不会到服务器 定义在这里 谷歌官网源码&#xff1a;chromium.googlesource.com git…
阅读更多...
Android 大话binder通信

Android 大话binder通信

戳蓝字“牛晓伟”关注我哦&#xff01; 用心坚持输出易读、有趣、有深度、高质量、体系化的技术文章 由于 Android 大话binder通信(上) 和 Android 大话binder通信(下) 分为两篇阅读体验不好&#xff0c;顾合并为一篇。 本文摘要 用故事的方式把binder通信的整个过程都描述…
阅读更多...
【408考点之数据结构】栈：定义、特点、基本操作与应用

【408考点之数据结构】栈：定义、特点、基本操作与应用

栈&#xff1a;定义、特点、基本操作与应用 栈是一种重要的线性数据结构&#xff0c;广泛应用于计算机科学和编程中。本文将介绍栈的定义、特点、基本操作以及常见应用。 栈的定义 栈&#xff08;Stack&#xff09;是一种特殊的线性表&#xff0c;只允许在表的一端进行插入和…
阅读更多...
TFMath Caculator:一个简单的Java AWT计算器

TFMath Caculator:一个简单的Java AWT计算器

目录 背景&#xff1a; 代码展示: 代码解析: 输出结果: 总结: 背景&#xff1a; 使用Java AWT(Abstract Window Toolkit)库创建的简单计算器应用-TFMath Calculator。这个计算器允许用户输入两个数字&#xff0c;点击号按钮后&#xff0c;计算器会计算这两个数字的和&…
阅读更多...
在文件末尾添加以下行来添加CRAN镜像（适合你的Ubuntu版本，例如focal）：添加的是ubuntu16.04版本

在文件末尾添加以下行来添加CRAN镜像（适合你的Ubuntu版本，例如focal）：添加的是ubuntu16.04版本

ChatGPT 如果你的Ubuntu版本是16.04&#xff08;Xenial Xerus&#xff09;&#xff0c;则应该使用适合该版本的CRAN镜像。下面是具体的步骤&#xff1a; 在Ubuntu 16.04上更新R到较新版本 添加CRAN镜像&#xff1a; 打开终端并编辑APT源列表文件&#xff1a; bash 复制代码 …
阅读更多...
计算机网络之OSI七层体系结构

计算机网络之OSI七层体系结构

目录 1.物理层 1.1物理层组成 1.2物理层功能 1.3物理层服务 1.4物理层标准 1.5物理层接口 2.数据链路层 2.1基于物理层的问题 2.2数据链路层功能 2.3数据链路层服务 2.4数据链路层协议 3.网络层 3.1基于DL层的问题 3.2网络层功能 3.3网络层服务 3.4网络层协议 …
阅读更多...
Django 靓号管理系统：实现登录功能

Django 靓号管理系统：实现登录功能

本文将详细介绍如何在 Django 靓号管理系统中实现登录功能，包括用户认证、验证码生成、以及中间件的使用。我们将逐步展示所有相关代码，并附带详细注释。 1. 项目结构 首先，让我们看一下项目的基本结构： number ├── manage.py ├── monaco.ttf ├── number │ …
阅读更多...
Linux下的SSH详解及Ubuntu教程

Linux下的SSH详解及Ubuntu教程

前言 SSH&#xff08;Secure Shell&#xff09;是一种用于计算机之间安全通信的协议&#xff0c;广泛应用于远程登录、系统管理和文件传输等场景。本文将详细介绍SSH在Linux系统&#xff08;特别是Ubuntu&#xff09;下的使用&#xff0c;包括安装、配置、密钥管理和常见应用&…
阅读更多...
怎么加快音频播放速度？加快音频播放器的四种方法介绍

怎么加快音频播放速度？加快音频播放器的四种方法介绍

怎么加快音频播放速度&#xff1f;许多音乐爱好者对各种类型的歌曲充满了热情&#xff0c;这些歌曲节奏轻快或者缓慢不一&#xff0c;但通常默认的播放速度都是一倍速。有时候&#xff0c;一些旋律悠扬的曲子可能听起来有些慢&#xff0c;这时候一些朋友可能想要尝试加快节奏&a…
阅读更多...
easyquotation获取港股的bug

easyquotation获取港股的bug

easyquotation&#xff1a;实时股票数据获取 easyquotation库&#xff0c;是一个非常好用的实时股票数据获取库&#xff0c;可以实时获取新浪、腾讯的免费股票行情&#xff0c;集思路的分级基金行情 安装 项目地址&#xff1a;https://github.com/shidenggui/easyquotation.…
阅读更多...
鸿蒙开发 之 健康App案例

鸿蒙开发 之 健康App案例

1.项目介绍 该项目是记录用户日常饮食情况&#xff0c;以及针对不同食物摄入营养不同会有对应的营养摄入情况和日常运动消耗情况&#xff0c;用户可以自己添加食品以及对应的热量。 1.1登陆页 1.2饮食统计页 1.3 食物列表页 2.登陆页 2.1自定义弹框 import preferences from oh…
阅读更多...
IP地址查询和代理服务器：双重保护隐私

IP地址查询和代理服务器：双重保护隐私

随着网络应用的日益普及&#xff0c;我们的个人信息和数据安全面临前所未有的挑战。在此背景下&#xff0c;IP地址查询和代理服务器成为保护个人隐私和网络安全的两大关键工具。本文将从IP地址查询的原理和应用出发&#xff0c;深入剖析代理服务器在网络隐私保护中的作用&#…
阅读更多...
最新文章

Copyright @ 2022~2023