太阳系各大行星运行轨迹

编程语言 2021-03-27 10:14:08 阅读次数: 0

利用CSS构造太阳系各大行星运行轨迹动画图网页

废话少说，直接上代码，然后再详细介绍构造过程。

代码

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>利用CSS构造太阳系各大行星运行轨迹动画图网页</title>

<style>

.solarsys{
     
     
  width: 832px;
  height: 832px;;
  position: relative;
  margin: 0 auto;
  background-color: #000000;
  padding: 0;
  transform: scale(1);
}

/*太阳*/
.sun {
     
     
  left:383px;
  top:383px;
  height: 70px;
  width: 70px;
  background-color: rgb(248,107,35);
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
  position: absolute;
  margin: 0;
}

/*水星*/
.mercury {
     
     
  left:351px;
  top:411px;
  height: 10px;
  width: 10px;
  background-color: rgb(166,138,56);
  border-radius: 50%;
  position: absolute;
  transform-origin: 65px 5px;
  animation: rotate 1.5s infinite linear;
}

/*水星轨道*/
.mercuryOrbit {
     
     
  left:356px;
  top:356px;
  height: 118px;
  width: 118px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*金星*/
.venus {
     
     
  left:321px;
  top:406px;
  height: 20px;
  width: 20px;
  background-color: rgb(246,157,97);
  border-radius: 50%;
  position: absolute;
  transform-origin: 95px 10px;
  animation: rotate 3.84s infinite linear;
}

/*金星轨道*/
.venusOrbit {
     
     
  left:331px;
  top:331px;
  height: 168px;
  width: 168px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}


/*地球*/
.earth {
     
     
  left:282px;
  top:404px;
  height: 24px;
  width: 24px;
  background-color: rgb(115,114,174);
  border-radius: 50%;
  position: absolute;
  transform-origin: 134px 12px;
  animation: rotate 6.25s infinite linear;
}

/*地球轨道*/
.earthOrbit {
     
     
  left:294px;
  top:294px;
  height: 242px;
  width: 242px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*火星*/
.mars {
     
     
  left:256px;
  top:408px;
  height: 16px;
  width: 16px;
  background-color: rgb(140,119,63);
  border-radius: 50%;
  position: absolute;
  transform-origin: 160px 8px;
  animation: rotate 11.75s infinite linear;
}

/*火星轨道*/
.marsOrbit {
     
     
  left:264px;
  top:264px;
  height: 302px;
  width: 302px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*木星*/
.jupiter {
     
     
  left:176px;
  top:391px;
  height: 50px;
  width: 50px;
  background-color: rgb(156,164,143);
  border-radius: 50%;
  position: absolute;
  transform-origin: 240px 25px;
  animation: rotate 72.04s infinite linear;
}

/*木星轨道*/
.jupiterOrbit {
     
     
  left:201px;
  top:201px;
  height: 428px;
  width: 428px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*土星*/
.saturn {
     
     
  left:106px;
  top:396px;
  height: 40px;
  width: 40px;
  background-color: rgb(215,171,68);
  border-radius: 50%;
  position: absolute;
  transform-origin: 310px 20px;
  animation: rotate 183.92s infinite linear;
}

/*土星轨道*/
.saturnOrbit {
     
     
  left:126px;
  top:126px;
  height: 578px;
  width: 578px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*天王星*/
.uranus {
     
     
  left:56px;
  top:401px;
  height: 30px;
  width: 30px;
  background-color: rgb(164,192,206);
  border-radius: 50%;
  position: absolute;
  transform-origin: 360px 15px;
  animation: rotate 524.46s infinite linear;
}

/*天王星轨道*/
.uranusOrbit {
     
     
  left:71px;
  top:71px;
  height: 688px;
  width: 688px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*海王星*/
.neptune {
     
     
  left:10px;
  top:403px;
  height: 26px;
  width: 26px;
  background-color: rgb(133,136,180);
  border-radius: 50%;
  position: absolute;
  transform-origin: 406px 13px;
  animation: rotate 1028.76s infinite linear;
}

/*海王星轨道*/
.neptuneOrbit {
     
     
  left:23px;
  top:23px;
  height: 784px;
  width: 784px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

@keyframes rotate {
     
     
  100% {
     
     
    transform: rotate(-360deg);
  }
}

</style>
</head>
<body>

<div class="solarsys">
  <!--太阳-->
  <div class="sun"></div>

  <!--水星轨道-->
  <div class="mercuryOrbit"></div>

  <!--水星-->
  <div class="mercury"></div>

  <!--金星轨道-->
  <div class="venusOrbit"></div>

  <!--金星-->
  <div class="venus"></div>

  <!--地球轨道-->
  <div class="earthOrbit"></div>

  <!--地球-->
  <div class="earth"></div>

  <!--火星轨道-->
  <div class="marsOrbit"></div>

  <!--火星-->
  <div class="mars"></div>

  <!--木星轨道-->
  <div class="jupiterOrbit"></div>

  <!--木星-->
  <div class="jupiter"></div>

  <!--土星轨道-->
  <div class="saturnOrbit"></div>

  <!--土星-->
  <div class="saturn"></div>

  <!--天王星轨道-->
  <div class="uranusOrbit"></div>

  <!--天王星-->
  <div class="uranus"></div>

  <!--海王星轨道-->
  <div class="neptuneOrbit"></div>

  <!--海王星-->
  <div class="neptune"></div>
</div>

</body></html>

在这里插入图片描述

构造过程

step1:声明

代码

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>利用CSS构造太阳系各大行星运行轨迹动画图网页</title>
<style>

</style>
</head>
<body>

<div class="solarsys">
  <!--太阳-->
  <div class="sun"></div>

  <!--水星轨道-->
  <div class="mercuryOrbit"></div>

  <!--水星-->
  <div class="mercury"></div>

  <!--金星轨道-->
  <div class="venusOrbit"></div>

  <!--金星-->
  <div class="venus"></div>

  <!--地球轨道-->
  <div class="earthOrbit"></div>

  <!--地球-->
  <div class="earth"></div>

  <!--火星轨道-->
  <div class="marsOrbit"></div>

  <!--火星-->
  <div class="mars"></div>

  <!--木星轨道-->
  <div class="jupiterOrbit"></div>

  <!--木星-->
  <div class="jupiter"></div>

  <!--土星轨道-->
  <div class="saturnOrbit"></div>

  <!--土星-->
  <div class="saturn"></div>

  <!--天王星轨道-->
  <div class="uranusOrbit"></div>

  <!--天王星-->
  <div class="uranus"></div>

  <!--海王星轨道-->
  <div class="neptuneOrbit"></div>

  <!--海王星-->
  <div class="neptune"></div>
</div>


</body></html>

声明设置完成，然后可以直接向里面添加东西了。

step2:构造思路

首先我们应该有一个大致的思路，构造各个行星，需要知道这些行星都是右方形实行块利用border-radius转化成圆形，我们首先应该确定各个行星的直径，以及位置分布。我们查阅资料知道各个行星的大小比例以及对应的位置。详细资料见太阳系八大行星详细资料和八大行星排列顺序。
在这里插入图片描述
然后我们就确定各个行星的直径，并且确定他们之间的间隔，见下图
在这里插入图片描述
我们将太阳，水星，金星，地球，火星，木星，土星，天王星和海王星的直径分别设置为90px,10px,20px,24px,16px,50px,40px,30px,26px。以及他们之间的间隔分别为10,10,15,10,30,30,20,20,10。则我们就可以知道整个背景的宽度和高度均为832px。我们的整个背景以及各个行星的运行轨迹都是设置成正方形形状，便于可以转化为圆形轨迹。

  则太阳系背景对应的css代码为：

CSS代码

.solarsys{
    
    
  width: 832px;
  height: 832px;;
  position: relative;
  margin: 0 auto;
  background-color: #000000;
  padding: 0;
  transform: scale(1);
}

接下来我们从外向内开始构造。

step3:构造海王星

我们从上一步中知道海王星的直径26px,并且海王星距离最左侧有10px的距离，则我们可以知道海王星的最上角坐标为：

left：10px    
top:H / 2 - d / 2 = (H - d) / 2 =(832 - 26) / 2 =403px

我们构造的海王星的高度和宽度均为26px,然后利用

border-radius: 50%;

将其转化成圆形。其中的transform-origin参数是为了行星环绕的效果，第二个参数为圆对应的半径，即：13px,第一个参数计算公式为：top-left+r=403-10+13=406px。

CSS代码

/*海王星*/
.neptune {
    
    
  left:10px;
  top:403px;
  height: 26px;
  width: 26px;
  background-color: rgb(133,136,180);
  border-radius: 50%;
  position: absolute;
  transform-origin: 406px 13px;
}

在这里插入图片描述

step4:构造海王星运行轨迹

海王星的运行轨迹应该为圆形的虚线表示，则我们可以通过构造正方形，然后将其转化为圆形。那我们就需要知道该方形的边长以及左上角的位置坐标，而且左上角的坐标left与top应该相同。方形虚线的运行轨迹应该经过对应圆的圆形，则我们就可以知道该轨迹对应的left应该为对应圆到左侧的距离，即left=10+13=23px。然后我们确定该方形的边长，我们已经知道了该方形的左上角的坐标，则我们就可以直接得到该方形的边长为(L / 2 - left)*2 = (416 - 23) *2= 786,然后我们再减去 外边框的值，即最终的结果为786 - 1 * 2 = 784。

CSS代码

/*海王星轨道*/
.neptuneOrbit {
    
    
  left:23px;
  top:23px;
  height: 784px;
  width: 784px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

在这里插入图片描述

step5:构造天王星

我们直接求海王星最上角坐标：

left：上一个的left + 上一个行星的直径 + 两个行星之间的距离
即：10 + 26 + 20 = 56
top:H / 2 - d / 2 = (H - d) / 2 =(832 - 30) / 2 =401px

其他的和构造海王星一致。

CSS代码

/*天王星*/
.uranus {
    
    
  left:56px;
  top:401px;
  height: 30px;
  width: 30px;
  background-color: rgb(164,192,206);
  border-radius: 50%;
  position: absolute;
  transform-origin: 360px 15px;
}

在这里插入图片描述

step6:构造天王星轨迹

构造过程与构造海王星轨迹一致。

CSS代码

/*天王星轨道*/
.uranusOrbit {
    
    
  left:71px;
  top:71px;
  height: 688px;
  width: 688px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

在这里插入图片描述

step7:构造其他行星和运行轨迹

构造过程与上面两个例子一致，不再进行赘述。
在这里插入图片描述

step7:构造太阳

构造过程与构造海王星和天王星一致，只不过需要注意box-shadow属性，则构造的方形边长应该对应地减少，为90-（5 + 5 + 10） = 70px。

CSS代码

/*太阳*/
.sun {
    
    
  left:383px;
  top:383px;
  height: 70px;
  width: 70px;
  background-color: rgb(248,107,35);
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
  position: absolute;
  margin: 0;
}

在这里插入图片描述
至此基本的图形已经构造完成，然后我们只需要在下一步构造旋转动画效果，就完成了最终的任务。

step8:构造动画效果

我们构造逆时针旋转效果。代码如下：

CSS代码

@keyframes rotate {
    
    
  100% {
    
    
    transform: rotate(-360deg);
  }
}

通过设置时间来控制各个行星的运行速度，即：

CSS代码

animation: rotate ts infinite linear;

设置一直旋转。
至此所有的步骤都已完成。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45723705/article/details/115216073
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022