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,一经查实,立即删除!

相关文章

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

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

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

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

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中央空调带你清凉舒爽一夏

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

Android 大话binder通信

戳蓝字“牛晓伟”关注我哦&#xff01; 用心坚持输出易读、有趣、有深度、高质量、体系化的技术文章 由于 Android 大话binder通信(上) 和 Android 大话binder通信(下) 分为两篇阅读体验不好&#xff0c;顾合并为一篇。 本文摘要 用故事的方式把binder通信的整个过程都描述…

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

目录 背景&#xff1a; 代码展示: 代码解析: 输出结果: 总结: 背景&#xff1a; 使用Java AWT(Abstract Window Toolkit)库创建的简单计算器应用-TFMath Calculator。这个计算器允许用户输入两个数字&#xff0c;点击号按钮后&#xff0c;计算器会计算这两个数字的和&…

计算机网络之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网络层协议 …

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

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

鸿蒙开发 之 健康App案例

1.项目介绍 该项目是记录用户日常饮食情况&#xff0c;以及针对不同食物摄入营养不同会有对应的营养摄入情况和日常运动消耗情况&#xff0c;用户可以自己添加食品以及对应的热量。 1.1登陆页 1.2饮食统计页 1.3 食物列表页 2.登陆页 2.1自定义弹框 import preferences from oh…

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

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

AI视频教程下载-数据分析中的提示工程:Python、Pandas、ChatGPT

Prompt Engineering for Data Analysis Python, Pandas, ChatGPT ChatGPT与Python&#xff1a;无需编程。借助ChatGPT、Python、Pandas及提示工程进行数据分析与数据可视化 "利用Python、Pandas和ChatGPT进行数据分析的提示工程"是一门开创性的课程&#xff0c;它通…

SpringBoot(二)SpringBoot多环境配置

Spring框架常用注解简单介绍 SpringMVC常用注解简单介绍 SpringBoot&#xff08;一&#xff09;创建一个简单的SpringBoot工程 SpringBoot&#xff08;二&#xff09;SpringBoot多环境配置 SpringBoot&#xff08;三&#xff09;SpringBoot整合MyBatis SpringBoot&#xff08;四…

vue-advanced-chat 聊天控件的使用

测试代码&#xff1a;https://github.com/robinfoxnan/vue-advanced-chat-test0 控件源码&#xff1a;https://github.com/advanced-chat/vue-advanced-chat 先上个效果图&#xff1a; 这个控件就是专门为聊天而设计的&#xff0c;但是也有一些不足&#xff1a; 1&#xf…

Python学习笔记26:进阶篇(十五)常见标准库使用之性能测试cProfile模块学习使用

前言 本文是根据python官方教程中标准库模块的介绍&#xff0c;自己查询资料并整理&#xff0c;编写代码示例做出的学习笔记。 根据模块知识&#xff0c;一次讲解单个或者多个模块的内容。 教程链接&#xff1a;https://docs.python.org/zh-cn/3/tutorial/index.html 本文主要…

.net core 的 winform 的 浏览器控件 WebView2

在.NET Core WinForms应用程序中&#xff0c;没有直接的“浏览器控件”&#xff0c;因为WinForms不支持像WebBrowser控件那样的功能。但是&#xff0c;你可以使用WebView2控件&#xff0c;它是一个基于Chromium的浏览器内核&#xff0c;可以在WinForms应用程序中嵌入Web内容。 …

R语言 | 使用ggplot绘制柱状图,在柱子中显示数值和显著性

原文链接&#xff1a;使用ggplot绘制柱状图&#xff0c;在柱子中显示数值和显著性 本期教程 获得本期教程示例数据&#xff0c;后台回复关键词&#xff1a;20240628。&#xff08;PS&#xff1a;在社群中&#xff0c;可获得往期和未来教程所有数据和代码&#xff09; 往期教程…

搭建ASPP:多尺度信息提取网络

文章目录 介绍代码实现 介绍 ASPP&#xff08;Atrous Spatial Pyramid Pooling&#xff09;&#xff0c;空洞空间卷积池化金字塔。简单理解就是个至尊版池化层&#xff0c;其目的与普通的池化层一致&#xff0c;尽可能地去提取特征。ASPP 的结构如下&#xff1a; 如图所示&…

十二、Yocto集成ROS2 app程序(package)

文章目录 Yocto集成ROS2 app程序1. 添加一个ros2 package应用程序2. 添加bb文件集成app应用程序 Yocto集成ROS2 app程序 本篇文章为基于raspberrypi 4B单板的yocto实战系列的第十二篇文章&#xff1a; 一、yocto 编译raspberrypi 4B并启动 二、yocto 集成ros2(基于raspberrypi…

GuLi商城-前端启动命令npm run dev

由于这里配置了dev&#xff0c;所以启动命令是npm run dev

柯桥在职学历提升|专科本科之自考本科哪些专业不考数学

一、管理类专业 这类专业综合性和理论性比较强&#xff0c;除了涉及到管理学相关的理论知识外&#xff0c;还有相应的专业知识&#xff0c;目前比较典型的专业有&#xff1a;行政管理、人力资源管理、工商管理&#xff08;现代企业管理&#xff09;、工商管理&#xff08;商务管…