CSS 绘制太阳系各个行星运行轨迹

最新推荐文章于 2024-02-02 11:12:48 发布
最新推荐文章于 2024-02-02 11:12:48 发布
阅读量970 收藏 11
点赞数 1
分类专栏： css3 css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50821119/article/details/111429607
版权
css 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
css3
13 篇文章 0 订阅
订阅专栏

效果图

在这里插入图片描述

原理

行星沿着自身轨道旋转。

  1. 设置盒子，宽高均为800px，采用相对定位。
  2. 太阳绝对定位到盒子中间。
  3. 地球轨道盒子，宽高250px为圆形，背景色透明，加一个灰色边框，就是地球轨道，
  4. 绝对定位，left=400px-250px/2=275px，top=400px-250px/2=275px。
  5. 地球设置为圆形宽高18px，绝对定位，要想地球在轨道上，
  6. left值就等于轨道的left值减去半径在加上边框半径的一半。275+0.5-9=266.5px
  7. top值等于400px-9px=391px。
  8. 旋转中心为transform-origin: 134px 9px;X轴为400-left值，y轴为400-半径。
  9. 动画设置为逆时针旋转360deg，动画执行时间为依次递增。从内圈到外圈。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .solarsys {
            width: 800px;
            height: 800px;
            position: relative;
            margin: 0 auto;
            background-color: #000;
            transform: scale(1);
        }
        /*太阳*/
        
        .sun {
            position: absolute;
            left: 357px;
            top: 357px;
            height: 90px;
            width: 90px;
            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);
        }
        /*水星轨道*/
        
        .mercuryOrbit {
            left: 342.5px;
            top: 342.5px;
            height: 115px;
            width: 115px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
        }
        /* 水星 */
        
        .mercury {
            position: absolute;
            left: 337.5px;
            top: 395px;
            height: 10px;
            width: 10px;
            background-color: rgb(166, 138, 56);
            border-radius: 50%;
            transform-origin: 62.5px 5px;
            animation: rotate 1.5s infinite linear;
        }
        /* 金星轨道 */
        
        .venusOrbit {
            left: 320px;
            top: 320px;
            height: 160px;
            width: 160px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
        }
        /* 金星 */
        
        .venus {
            left: 309px;
            top: 389px;
            height: 22px;
            width: 22px;
            background-color: rgb(246, 157, 97);
            border-radius: 50%;
            position: absolute;
            transform-origin: 91px 11px;
            animation: rotate 3.84s infinite linear;
        }
        /* 地球轨道 */
        
        .earthOrbit {
            position: absolute;
            left: 275px;
            top: 275px;
            width: 250px;
            height: 250px;
            background-color: transparent;
            border: 1px solid gray;
            border-radius: 50%;
        }
        /* 地球 */
        
        .earth {
            left: 266.5px;
            top: 391px;
            height: 18px;
            width: 18px;
            background-color: rgb(115, 114, 174);
            border-radius: 50%;
            position: absolute;
            transform-origin: 133.5px 9px;
            animation: rotate 6.25s infinite linear;
        }
        /* 火星轨道 */
        
        .marsOrbit {
            position: absolute;
            left: 230px;
            top: 230px;
            height: 340px;
            width: 340px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            border-width: 1px;
        }
        /* 火星 */
        
        .mars {
            position: absolute;
            left: 222.5px;
            top: 397.5px;
            height: 15px;
            width: 15px;
            background-color: rgb(140, 119, 63);
            border-radius: 50%;
            position: absolute;
            transform-origin: 177.5px 7.5px;
            animation: rotate 11.75s infinite linear;
        }
        /* 木星轨道 */
        
        .jupiterOrbit {
            position: absolute;
            left: 155px;
            top: 155px;
            height: 490px;
            width: 490px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            border-width: 1px;
        }
        /* 木星 */
        
        .jupiter {
            position: absolute;
            left: 134px;
            top: 379px;
            height: 42px;
            width: 42px;
            background-color: rgb(156, 164, 143);
            border-radius: 50%;
            position: absolute;
            transform-origin: 266px 21px;
            animation: rotate 74.04s infinite linear;
        }
        /* 土星轨道 */
        
        .saturnOrbit {
            position: absolute;
            left: 105px;
            top: 105px;
            width: 590px;
            height: 590px;
            border-radius: 50%;
            background-color: transparent;
            border: 1px dashed gray;
        }
        /* 土星 */
        
        .saturn {
            position: absolute;
            height: 26px;
            width: 26px;
            left: 92px;
            top: 387px;
            border-radius: 50%;
            background-color: rgb(215, 171, 68);
            transform-origin: 308px 13px;
            animation: rotate 183.92s infinite linear;
        }
        /* 天王星天王星轨道 */
        
        .uranusOrbit {
            position: absolute;
            top: 55px;
            left: 55px;
            width: 690px;
            height: 690px;
            border-radius: 50%;
            background-color: transparent;
            border: 1px dashed gray;
        }
        /* 天王星 */
        
        .uranus {
            position: absolute;
            width: 27px;
            height: 27px;
            left: 41.5px;
            top: 386.5px;
            background-color: rgb(164, 192, 206);
            border-radius: 50%;
            transform-origin: 358.5px 13.5px;
            animation: rotate 524.46s infinite linear;
        }
        /*海王星*/
        
        .neptune {
            left: 10px;
            top: 390px;
            height: 20px;
            width: 20px;
            background-color: rgb(133, 136, 180);
            border-radius: 50%;
            position: absolute;
            transform-origin: 390px 10px;
            animation: rotate 1028.76s infinite linear;
        }
        /*海王星轨道*/
        
        .neptuneOrbit {
            position: absolute;
            left: 20px;
            top: 20px;
            height: 760px;
            width: 760px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            border-width: 1px;
        }
        
        @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>
云杰8了
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3-旋转的星球
Growing_wild的博客
08-30 1951
简单的利用animation弄了旋转的星球，做一个复习。 实现的原理其实是包裹圆的的父级元素设置了rotate()动画，就会产生旋转的效果 + 再加上animation-play-state:running;作为正在动画的标志，这个属性可以便捷的设置在鼠标悬停到球体上的时候不再旋转，也就是在最外层或者是你想要具体设置的地方的样式上添加：animation-play-state:paused; +...
css八大行星旋转实例
can_Sunshine的博客
11-23 2028
*{ 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
CSS实现天体旋转
2201_75321887的博客
05-11 724
主要运用了animation动画，使地球进行自转，月球进行公转，效果如下（GIF动图有点大，传不进来），地球自己在旋转，月球围绕地球进行旋转。
css动画：多个行星围绕中心恒星旋转
m0_55336994的博客
10-14 1144
最近练习css动画。写两种“多个行星围绕中心恒星旋转” 一种是中间恒星旋转，直接上代码 <div class="center"> <div class="box1"> <view class="box1_child">我是</view> </div> <div class="box2">2</div> <div class="box3">3</div>
css动画小案例（太阳地球月球运动轨迹）
zhangawei123的博客
09-27 2562
简单的css动画实现太阳地球月球运动轨迹。
纯CSS3绘制太阳系行星动画运动轨迹
09-08
在本教程中，我们将深入探讨如何使用纯CSS3来创建一个引人入胜的太阳系行星动画运动轨迹。CSS3，即层叠样式表第三版，是Web开发中用于描述网页及应用程序外观和表现的样式语言。其强大的功能使得开发者无需...
纯CSS3绘制的太阳系行星动画运动轨迹效果特效代码
03-20
这是一款基于纯CSS3绘制的太阳系行星动画运动轨迹效果源码。画面上各个行星围绕着中心的太阳以自身的速度做圆周运动，动画效果流畅自然，采用纯css3技术实现动画效果。是一款比较经典的css3动画效果源码。建议使用...
纯CSS3绘制的太阳系行星动画运动轨迹效果源码.zip
11-20
总结来说，这个"纯CSS3绘制的太阳系行星动画运动轨迹效果源码"展示了CSS3的强大之处，通过其动画和3D转换特性，能够生动地模拟出天体运动的视觉效果，为网页设计带来了更多的可能性。对于学习和理解CSS3的高级用法，...
用CSS3制作太阳系行星运动简图
奶香片的日子
04-26 1958
CSS3的小实验  本文章仅仅是对基础的CSS3进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。   快一个月没更新博客了，期中考试的那些题也没什么好说的必要，，，，今天想着期中考试忙的差不多了，就看看CSS的东西，看到一个行星运动的图还挺好玩，就来讲讲。然后因为我之前对CSS以及HTML5的基础部分讲解较为多，故在这里对我认为比较简单的部分就不做讲解，如果有不了解的地方可以看看我以前的...
太阳系各大行星运行轨迹
weixin_45723705的博客
03-25 6524
利用CSS构造太阳系各大行星运行轨迹动画图网页 废话少说，直接上代码，然后再详细介绍构造过程。 代码 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>利用CSS构造太阳系各大行星运行轨迹动画图网页</title> <style> .solarsys{ width
CSS3实现五彩3D旋转星球
12-20
CSS3实现五彩3D旋转星球
利用CSS+JS实现唯美星空轨迹运动效果
09-24
本文给大家分享一个使用CSS+JS实现的唯美星空轨迹运动效果，效果非常逼真，下面小编给大家带来了实例代码，需要的朋友参考下
css行星旋转 无脚本
星云
02-14 283
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Planet</title> <style> * { margin: 0; padding: 0; } body, html {
HTML+CSS 绘制太阳系各个行星运行轨迹
最新发布
zeyeqianli的博客
02-02 455
在这个网页中，太阳是太阳系的中心，围绕着太阳运动的行星有水星、金星、地球、火星、木星、土星、天王星和海王星。每个行星都有自己的轨道，不同行星的运动速度和轨道大小也不同，使得整个太阳系呈现出多样化的美丽景象。这个项目是一个太阳系各个行星运行轨迹的静态网页，通过CSS3动画实现行星的旋转。它可视化了太阳系行星的运动轨迹和相对位置，给人们以更直观的感受。
CSS3动画之行星运行轨迹（钟表也行）
yuan5801551的博客
08-14 793
CSS3动画之行星运行轨迹（钟表也行） 先看一下我们要的效果 当然圆球是可以动的，就像行星一样沿着轨迹动，手机里很多时间表也是这样动的 是不是非常有意思! 我们先介绍一下知识点 - CSS3动画-@keyframes - CSS3 2D旋转-transform:rotate(angle) 用法 @keyframes name{ from{somecode}to{somecode} ...
CSS 绘制太阳系行星运行轨迹
屁桃恒的博客
11-19 704
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 动画</title> <style> div.ex1{ width: 100px; ...
教你用CSS3做一个旋转的宇宙星球
_小郑有点困了的博客
02-07 2049
教你用CSS3做一个旋转的宇宙星球 可能略有瑕疵，无非就是先画一个圆圈，把小球定位到上面，然后再让圆圈旋转即可 直接上效果图 代码 <!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8"> &nbs...
HTML+CSS+JS实现 ❤️ 宇宙星球旋转动画特效❤️
java李阳勇的博客
09-03 3300
代码目录： 主要代码实现： 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...
14（高级）CSS动画之：旋转星球
MJ的博客
02-15 1202
方法： #earth{     width: 800px;     height: 800px;     clear: both;     background:url("earth.png") center center no-repeat;     background-color:#ffbb33 ;     border-radius: 50%;     position:
css太阳系各行星转动动画代码分析
04-25
抱歉，我是一个语言模型AI，不具备演示代码的功能。但是，我可以分享一些关于CSS太阳系动画的基本知识和关键点。首先，使用CSS可以创建出非常逼真和流畅的太阳系动画效果。其次，太阳系中每个星球都有一个不同的大小、位置、颜色和转动速度。因此，在实现动画时，需要使用transform 和 animation 属性，对每个星球单独设置不同的效果。最后，还可以使用JavaScript控制太阳系中不同星球的位置，从而实现更加生动和交互性的动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值