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

最新推荐文章于 2024-05-18 14:03:48 发布
最新推荐文章于 2024-05-18 14:03:48 发布
阅读量1.6k 收藏 3
点赞数 1
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsy01/article/details/104447331
版权

模拟宇宙太阳系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟太阳系</title>
    <!-- CSS样式开始 -->
    <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: 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: 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: 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: 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: 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: 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: 0px;
            padding: 0px;
        }
        /* CSS动画开始：@keyframes用于创建一个动画，后面跟的是一个你要绑定的动画选择器，绑定动画选择器用(animation:) */
        @keyframes rotate {
            100% {
                transform: rotate(-360deg);
            }
        }
    </style>
    <!-- CSS样式结束 -->
</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>
I Believe in
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
八大行星网页制作
05-27
关于八大行星的网页制作，包括html详细代码及css样式，比如说锚点的插入，div标签，和类选择器等的综合使用。
纯HTML5制作的震撼太阳系网页
11-11
纯HTML5制作的震撼太阳系网页
Html5绘制小型太阳系模型
04-09
Html5绘制小型太阳系模型
HTML+CSS绘制太阳系九大行星运行轨迹
自由&不束缚的博客
02-23 4082
HTML+CSS绘制太阳系九大行星运行轨迹 最近正在学习前端的相关知识，学习过程中发现这个项目比较有趣且知识涵盖比较多，所以就写篇博客记录一下，方便以后查看。这是我第一次写技术博客，如遇有缘人觉得写的不好的话，请指点。 首先先展示一下运行效果 原本效果是动态的，但第一次发表，不会导入视频，现只插入图片，以后学会再更改回来。 代码部分 HTML代码 <!DOCTYPE html> &l...
用HTML+css制作太阳系
前端黄晨琼的博客
11-16 1145
大家想知道这个星系图如何制作吗 代码如下 <html> <head> <meta charset="UTF-8"> <title>太阳星星系</title> <style type="text/css"> @keyframes rotate{ from{ transform: rotate...
HTML5绘制八大行星加入字体,html5中用canvas画八大行星围绕太阳转
weixin_42366752的博客
06-25 522
九大行星您的浏览器版本过低，不支持canvas标签var canvas=document.getElementById("canvas");var cxt=canvas.getContext("2d");function drawTrack(){for(var i=0;i<8;i++){cxt.beginPath();cxt.arc(500,500,50*(i+1),0,360,false)...
html+css3太阳系行星运转动画效果的实现代码
09-28
下面小编就为大家带来一篇html+css3太阳系行星运转动画效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS3绘制太阳系行星动画运动轨迹
09-08
纯CSS3绘制太阳系行星动画运动轨迹
纯CSS3绘制的太阳系行星动画运动轨迹效果源码.zip
07-04
这是一款基于纯CSS3绘制的太阳系行星动画运动轨迹效果源码。画面上各个行星围绕着中心的太阳以自身的速度做圆周运动，动画效果流畅自然，采用纯css3技术实现动画效果。是一款比较经典的css3动画效果源码。建议使用...
纯CSS3绘制的太阳系行星动画运动轨迹效果特效代码
03-20
这是一款基于纯CSS3绘制的太阳系行星动画运动轨迹效果源码。画面上各个行星围绕着中心的太阳以自身的速度做圆周运动，动画效果流畅自然，采用纯css3技术实现动画效果。是一款比较经典的css3动画效果源码。建议使用...
js 特效 html 特效 模拟太空飞行
08-20
js 特效 html 特效 模拟太空飞行 js 特效 html 特效 模拟太空飞行
八大行星运行图，介绍，网页源代码
12-08
最精彩的莫过于八大行星运转图，介绍部分参考是百度百科的样式。
Html+Css实现九大行星动画效果
weixin_30563917的博客
01-12 909
　　前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转，折腾了好久弄出了个样子，但是最后客户改版了不需要了，好不容易弄出来的吊炸天的效果不能这么浪费了， 　　今年神舟十一号载人飞船顺利发射成功，中国航天技术越来越成熟，浩瀚的宇宙中有着无限的未知等着我们去探索，为表示对祖国航天事业的支持，用代码来表示是最合适的了，就用3D效果稍微修改修改画了一个九大行星星系图，当然因为冥王星被踢出了，大家不...
HTML5---Canvas-模拟9星球运行轨道
Damys
06-13 4818
规则：星球 英文名 公转周期 光色 暗色 水星 Mercury 87.70 天 #A69697 #5C3E40 金星 Venus 224.701天 #C4BBAC #1F1315 地球 Earth 365.2422天 #78B1E8 #050C12 火星 Mars 686.98 日 #C
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 185
换行标签 水平线标签
再次修改导航样式，看看哪个好看
lulei5153的博客
05-17 163
【代码】再次修改导航样式，看看哪个好看。
零基础HTML教程(34)--HTML综合实例
最新发布
程序员大阳
05-18 651
DOCTYPE html > < html > < head > < meta charset = " utf-8 " > < title > 生平简介 </ title > </ head > < body > <!-- 头部 --> < header > < h1 > 苏轼网 </ h1 > </ header > <!
html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应
hx_1199的博客
05-17 401
rem 是相对文档根元素(html)字体大小的尺寸单位，当元素的尺寸或文字字号等使用 rem 单位时，会随着根元素的 font-size变化而变化。以750px 设计稿为例 100vw=750px 750/18.75=40 即 1rem=40px;以1920px 设计稿为例 100vw=1920px 1920 / 48 =40 即 1rem=40px;在不同分辨率的设备下动态设置根元素的字体大小就可以实现页面自适应。
HTML静态网页成品作业(HTML+CSS+JS)——动漫火影忍者网页设计制作(5个页面)
weixin_42283461的博客
05-17 387
HTML静态网页成品作业(HTML+CSS+JS)——动漫火影忍者网页设计制作(5个页面)
使用html+css 绘制一个 信用卡
06-10
很好，让我来为您解答。 首先，我们需要使用HTML创建信用卡的基本结构。以下是一个示例代码： ```html <div class="credit-card"> <div class="credit-card__logo"></div> <div class="credit-card__number">1234 5678 9012 3456</div> <div class="credit-card__name">FULL NAME</div> <div class="credit-card__expiration"> <div class="credit-card__expiration-label">Expiration Date</div> <div class="credit-card__expiration-date">MM/YY</div> </div> </div> ``` 接下来，我们需要使用CSS来设计这个信用卡。以下是一个示例代码： ```css .credit-card { width: 400px; height: 250px; background-color: #fafafa; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; box-sizing: border-box; position: relative; } .credit-card__logo { width: 80px; height: 50px; background-image: url('credit-card-logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 20px; right: 20px; } .credit-card__number { font-size: 24px; font-weight: bold; letter-spacing: 4px; } .credit-card__name { font-size: 18px; font-weight: bold; text-transform: uppercase; } .credit-card__expiration { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; } .credit-card__expiration-label { font-size: 12px; font-weight: bold; color: #a9a9a9; } .credit-card__expiration-date { font-size: 18px; font-weight: bold; letter-spacing: 2px; } ``` 上面的CSS样式将为我们的信用卡添加样式，包括背景颜色，阴影，边框半径，文本样式和位置。 最后，我们只需要将HTML和CSS结合起来，就可以创建一个漂亮的信用卡了。如果您有自己的信用卡图标和样式，只需要将其替换为示例代码中的图标和样式即可。 希望这可以帮助您创建一个漂亮的信用卡！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值