css模拟行星

最新推荐文章于 2024-02-02 11:12:48 发布
最新推荐文章于 2024-02-02 11:12:48 发布
阅读量221 收藏 1
点赞数
分类专栏： js插件 
<html>

<head>

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


        /*太阳*/
        .sun {
            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);
            position: absolute;
            margin: 0;
        }


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


        /*水星轨道*/
        .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;
            margin: 0px;
            padding: 0px;
        }


        /*金星*/
        .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;
        }


        /*金星轨道*/
        .venusOrbit {
            left:320px;
            top:320px;
            height: 160px;
            width: 160px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }


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


        /*地球轨道*/
        .earthOrbit {
            left:275px;
            top:275px;
            height: 250px;
            width: 250px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }


        /*火星*/
        .mars {
            left:222.5px;
            top:392.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;
        }


         /*火星轨道*/
        .marsOrbit {
            left:230px;
            top:230px;
            height: 340px;
            width: 340px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }


        /*木星*/
        .jupiter {
            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;
        }


        /*木星轨道*/
        .jupiterOrbit {
            left:155px;
            top:155px;
            height: 490px;
            width: 490px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }


        /*土星*/
        .saturn {
            left:92px;
            top:387px;
            height: 26px;
            width: 26px;
            background-color: rgb(215,171,68);
            border-radius: 50%;
            position: absolute;
            transform-origin: 308px 13px;
            animation: rotate 183.92s infinite linear;
        }


        /*土星轨道*/
        .saturnOrbit {
            left:105px;
            top:105px;
            height: 590px;
            width: 590px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }


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


        /*天王星轨道*/
        .uranusOrbit {
            left:55px;
            top:55px;
            height: 690px;
            width: 690px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            margin: 0px;
            padding: 0px;
        }


        /*海王星*/
        .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 {
            left:20px;
            top:20px;
            height: 760px;
            width: 760px;
            background-color: transparent;
            border-radius: 50%;
            border-style: dashed;
            border-color: gray;
            position: absolute;
            border-width: 1px;
            /*margin: 100px;*/
            /*transform-origin: -75px -75px;*/
            /*animation: rotate 4s infinite linear;*/
            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>

http://www.cnblogs.com/kongxianghai/p/5568893.html

Albert_Tiger
关注
专栏目录
css3模拟3D行星运转效果图特效代码
03-20
通过不断改变CSS3的3D转换属性，我们可以模拟行星的运动轨迹。 2. **事件绑定**：使用jQuery的`$(document).ready()`或`$(window).load()`可以确保在页面加载完毕后执行相关代码，确保行星旋转效果的准确展现。 三...
css3实现行星自转效果动画
ICode联盟
10-28 264
下载地址使用css3代码实现的实现行星自转效果动画dd:
css动画：多个行星围绕中心恒星旋转
m0_55336994的博客
10-14 1228
最近练习css动画。写两种“多个行星围绕中心恒星旋转” 一种是中间恒星旋转，直接上代码 <div class="center"> <div class="box1"> <view class="box1_child">我是</view> </div> <div class="box2">2</div> <div class="box3">3</div>
恒星绕太阳转css,CSS3 宇宙/恒星/小行星动画
weixin_42352351的博客
08-04 777
CSS语言：CSSSCSS确定html,body {width: 100%;height: 100%;overflow: hidden;}body {background-color: #111117;}.universe {width: 100%;height: 100%;-webkit-transform-style: preserve-3d;transform-style: preserve...
css表现 行星 椭圆 球
c_qianxia5040的博客
01-06 394
通过长方形，并将圆角设置为50%，画椭圆。背景色渐变，凸显球形。
巧妙利用CSS3实现太阳系行星公转运动轨迹
weixin_34189116的博客
06-21 1100
前段时间在博客园看到一篇很不错的文章，就是介绍如何用CSS3来实现太阳系中行星的运动。本×××处于好奇心从头到完整的看完了。突然发现好奇不仅仅害死猫，也可以增长知识嘛（你这是什么谬论！！！）。也许有的朋友看过有关的文章那么今天我们就一起来看看怎么巧妙的利用CSS3 来实现这么漂亮的动画的吧！我不清楚大家对于CSS3的动画了解多少，但是我对于 CSS3的东西还是限制与用什么查什...
css3模拟3D行星运转效果图.zip
09-25
《CSS3模拟3D行星运转效果详解》 在数字化时代，网页设计的视觉效果日益受到重视，其中，利用CSS3创建动态、引人入胜的特效成为了一项重要的技术手段。"css3模拟3D行星运转效果图.zip" 文件提供了一个生动的示例，...
css3地球行星导航动画特效特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3技术创建一个引人入胜的“地球行星导航动画特效”。这个特效主要利用了CSS3中的图形绘制、变换和动画特性，为用户提供一个富有动态美感的导航界面。 首先，CSS3是层叠样式表...
CSS3行星围绕太阳运动动画特效.zip
11-02
"CSS3行星围绕太阳运动动画特效"是一个利用CSS3的强大特性来实现的互动展示，它模拟了行星围绕太阳的动态轨迹，为用户带来生动的视觉体验。这个效果通常用于网站的背景或者互动元素，可以提升用户的浏览兴趣和页面的...
前端css-轨迹星球动效
WANGLING0108的博客
04-18 1382
竖屏基于css实现的动画效果、可添加星球数量、星球可跳转扩展逻辑、兼容横屏
三体模拟软件v4.0（三体＋行星版）
01-02
1、打开已有的一组三体配置文件（.tbc）并运行（点击播放按钮）。 "File"菜单下有导入(Import)、导出(Export)功能，在不能上传附件时方便以纯文本方式交流自己搜索出来的三体配置！ 2、手工设定初始条件的全部数值（点击魔术棍按钮）。分别指定三个物体的初始条件（X、Y、Z坐标，质量，初始速度的幅度、在XY平面上的角度0~360、在XZ平面上的角度0~360）。四个圆形选项(Radio Button)是参照系选择：默认的"Normalize to Centroid"是按三体系统质心作为参照系进行速度平衡，相当于观察者总是跟随三体的质心运动。另外三个选项分别是以第一、二、三个天体作为参照系，即总是把这个天体放在中心位置从不移动－－注意这是非惯性参照系！(一般应选取行星主要围绕的那个恒星，方便观察行星轨道) 如果XZ平面上的初始速度角度都是0，则退化为二维的三体。 不过手工设定的条件通常都很难稳定运行。 3、设定搜索条件，让软件自动搜索。搜索分为两步： 3.1、搜索稳定的三体解（点击望远镜按钮） 第一部分是每个物体的约束条件：坐标最大值、最小质量、最大质量、最小速度幅度、最大速度幅度。 第二部分是是否要求三体在最初N步里超出一个边长为M的方框范围。这样看起来比较有趣，但搜索起来可能很慢。 第三部分是三体必须在N步里不超出一个边长为M的方框范围。否则它们很快发散就不好玩了。 然后那个复选框是：是否只进行二维搜索。 搜索结束后会出现一组初始条件值，点OK就开始运行了。 3.2、在三体解的基础上，搜索稳定的行星解（点击右下有小球的望远镜按钮） 手工设定或者自动搜索出来的解，如果喜欢的话，可以存盘，也可以导出为纯文本贴在论坛上与大家共享。压缩包里的.tbc也是偶自己用这个软件搜出来的。 四个播放按钮： 第一个播放形状的，是开始或者继续运行； 第二个暂停形状的，是暂停； 第三个短箭头，是减速运行； 第三个双箭头，是加速运行。 速度有很多档次，从减速6倍到加速运行100倍，直到加速100倍跳3125帧（相当于加倍312500倍，但每隔3125帧才显示一帧，所以看起来很不连续），每5倍为一个档次。
css3加js做一个简单的3D行星运转效果实例代码
09-24
主要介绍了css3加js做一个简单的3D行星运转效果实例代码,效果非常炫酷，有想去的可以了解一下。
基于H5,CSS3及JS的四星环绕中心点旋转效果
06-28
本效果是基于HTML5，CSS3及JavaScript实现的，实现了移动端和web端的兼容居中显示。同时，以中心图片为圆点，四周图片环绕中心图片旋转，主要使用到的技术点在于z-index以及border-radius:50%，实现效果仅供参考（其中图片请自行替换）。
穿越银河星空CSS3动画特效
07-24
穿越银河星空CSS3动画特效是一款适用于科技信息通信的全屏背景动画特效。
OPENGL行星模拟系统
01-11
简单实现OPENGL日地月运动动画。没有纹理，比较简单。
HTML+CSS 绘制太阳系各个行星运行轨迹
最新发布
zeyeqianli的博客
02-02 539
在这个网页中，太阳是太阳系的中心，围绕着太阳运动的行星有水星、金星、地球、火星、木星、土星、天王星和海王星。每个行星都有自己的轨道，不同行星的运动速度和轨道大小也不同，使得整个太阳系呈现出多样化的美丽景象。这个项目是一个太阳系各个行星运行轨迹的静态网页，通过CSS3动画实现行星的旋转。它可视化了太阳系行星的运动轨迹和相对位置，给人们以更直观的感受。
Css3动画（一） 如何画3D旋转效果或者卫星围绕旋转效果
weixin_33985679的博客
05-28 1217
如何画3D旋转效果或者卫星围绕旋转效果，当然这个也是工作中的一个任务，我在网上翻了一下，并没有找到类似的东西，所以写下来还是费了一番功夫，因此我把它拿出来记录一下，当然替换了一部分内容。好了，话不多说，进入正题。 我们都知道，浏览器是一个平面的视觉效果，如何在一个平面上看出立体的3D效果呢，其实就是一个视觉差的问题。那我们就从一个平面视觉效果一步一步画出立体的3D效果来。我还是先把效...
纯CSS3模拟星体旋转效果
weixin_34259159的博客
08-18 289
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯CSS3模拟星体旋转效果</title> <style> .box{ transform: scale(0.5); posi...
css3类似太阳系按轨迹旋转
ICode联盟
08-03 207
css3实现的围绕中心点旋转，类似太阳行星系按轨迹旋转动画特效。
css 模拟 select选择
06-01
如果您想要使用CSS模拟下拉列表选择框，可以使用以下代码： HTML代码： ``` <div class="select-selected">Select an option <div>Option 1 <div>Option 2 <div>Option 3 ``` CSS代码： ``` /* 隐藏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值