css做旋转星球可举一反三

已于 2024-06-28 18:43:24 修改
阅读量451 收藏
点赞数 4
文章标签： css javascript css3
于 2024-06-27 23:28:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45432996/article/details/140027126
版权

在这里插入图片描述

<!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>
喔烨鸭
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3-旋转的星球
Growing_wild的博客
08-30 1987
简单的利用animation弄了旋转的星球，做一个复习。 实现的原理其实是包裹圆的的父级元素设置了rotate()动画，就会产生旋转的效果 + 再加上animation-play-state:running;作为正在动画的标志，这个属性可以便捷的设置在鼠标悬停到球体上的时候不再旋转，也就是在最外层或者是你想要具体设置的地方的样式上添加：animation-play-state:paused; +...
css八大行星旋转实例
can_Sunshine的博客
11-23 2033
*{ margin: 0; padding: 0; list-style: none; } ul{ width: 600px; height: 600px; margin: 100px auto; background: rgba(0,0,0,0.5); position: relative; } li{ width: 100%; height: 100%; bord
教你用CSS3做一个旋转的宇宙星球
_小郑有点困了的博客
02-07 2067
教你用CSS3做一个旋转的宇宙星球 可能略有瑕疵，无非就是先画一个圆圈，把小球定位到上面，然后再让圆圈旋转即可 直接上效果图 代码 <!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8"> &nbs...
CSS特效003：太阳、地球、月球之间的绕转动画
最新发布
大剑师兰特的GIS世界
11-09 1276
GPT能够很好的应用到我们的代码开发中，能够提高开发速度。你可以利用其代码，做出一定的更改，然后实现效能。css实战中，这种球体间的旋转，主要通过rotate()旋转函数来实现。实际上，蓝色的地球和黑色的月球并没有发生旋转，只是其父级旋转形成的视觉上的旋转效果。
css动画：多个行星围绕中心恒星旋转
m0_55336994的博客
10-14 1179
最近练习css动画。写两种“多个行星围绕中心恒星旋转” 一种是中间恒星旋转，直接上代码 <div class="center"> <div class="box1"> <view class="box1_child">我是</view> </div> <div class="box2">2</div> <div class="box3">3</div>
CSS实现天体旋转
2201_75321887的博客
05-11 762
主要运用了animation动画，使地球进行自转，月球进行公转，效果如下（GIF动图有点大，传不进来），地球自己在旋转，月球围绕地球进行旋转。
前端css-轨迹星球动效
WANGLING0108的博客
04-18 1351
竖屏基于css实现的动画效果、可添加星球数量、星球可跳转扩展逻辑、兼容横屏
HTML+CSS+JS实现 ❤️ 宇宙星球旋转动画特效❤️
java李阳勇的博客
09-03 3345
代码目录： 主要代码实现： css样式： /** * @date 2021/1/20 16:10 */ /* 取消默认间距 */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #fff; outline: none } .container { width: 100%; height: 100%; backgrou...
html+css实现星系图
前端成长之路
04-16 2094
01-html+css+js实现时钟 02-html+css+js实现骰子 03-html+css+js实现点名系统 文章目录01-html+css+js实现时钟02-html+css+js实现骰子03-html+css+js实现点名系统前言一、整体效果二、代码实现1.背景图2.主体星系总结 前言 本文通过html和css3D旋转属性实现星系效果。 一、整体效果 整体效果如下： 1、文字逐行、渐变显示； 2、背景星系图旋转； 3、行星绕中心公转； 4、行星自转； 5、行星自身轨道绕行星旋转。 效果图如下
css地球旋转
HELLOWORLD!
07-19 473
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css地球旋转</title> <style> * {margin:0; padding:0; border:0;} .rotateBox {width:200px; height:200px; margin:100px; } .rotateBoxImg {width:200px; height:200p
CSS3星球旋转手机表单代码
04-06
在本文中，我们将深入探讨如何使用CSS3实现一个独特的手机端表单设计——"CSS3星球旋转手机表单代码"。这个设计将银河星球的旋转动画与表单元素结合，为用户带来一种新颖且引人入胜的交互体验。下面我们将详细讲解...
CSS3星球旋转手机表单特效代码
03-20
【CSS3星球旋转手机表单特效代码】是一个创新的网页设计元素，利用了CSS3的强大功能，为用户提供了一种引人入胜的交互体验。这个特效将表单提交按钮与一个动态的银河星球旋转动画结合在一起，使得原本单调的表单变得...
CSS3实现五彩3D旋转星球
11-24
总结起来，实现“CSS3实现五彩3D旋转星球”的关键是熟练掌握CSS3的3D转换、动画和背景渐变等特性。通过巧妙地组合这些属性，我们可以创建出令人惊叹的视觉效果，同时保持代码的简洁性和可维护性。通过不断地实践和...
css3旋转加载动画特效代码
03-20
在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了许多强大的功能，其中之一就是动画效果。"CSS3旋转加载动画特效代码"是一个很好的实例，展示了如何利用CSS3的特性来创建吸引人的动态加载效果，这对于...
html5行星环绕,CSS3 星球环绕动画
weixin_34161139的博客
06-30 880
body {margin:0;padding:0;background:#080e24 url(./bg.jpg) repeat;}ul {width:600px;height:600px;margin:40px auto;position:relative;list-style:none;}ul li {border:2px solid #394057;position:absolute;lef...
55.纯 CSS 创作一个太阳、地球、月亮的运转模型
anfuye3276的博客
03-27 396
55.纯 CSS 创作一个太阳、地球、月亮的运转模型 原文地址：https://segmentfault.com/a/1190000015313341 感想：主要运用边框、伪元素、动画。 HTML code： <div class="contain...
【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
weixin_33984032的博客
04-28 317
承接上一篇：【CSS3进阶】酷炫的3D旋转透视 。 最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。 CSS3 3D 行星运转 demo 页面请戳：Demo。（建议使用Chrome打开） 本文完整的代码，以及更多的 CSS3 效果，在我 Github 上可以看到，也希望大家可以点个 star。 嗯，可能有些人打不开 demo 或者页面乱了，贴几张效果图：（图片有点大，耐心等...
使用CSS展现出各行星轨道
weixin_51929568的博客
03-05 838
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> /*使用keyframes创建名为rotate的动画，用于让各行星绕轨道运动*/ @keyframes rotate{ 100% { transform: rotate(-360deg);/*
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值