前端知识分享小课堂—html(css3制作简易星球运行轨迹动画)

最新推荐文章于 2023-11-09 00:15:00 发布
最新推荐文章于 2023-11-09 00:15:00 发布
阅读量1k 收藏 5
点赞数 1
文章标签： 前端 动画 css3
原文链接：https://blog.51cto.com/u_15111999/4674756
版权

今天分享下”前端知识分享小课堂—html(css3制作简易星球运行轨迹动画)“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 做一个太阳系八大行星的运转动画，不包括行星的星，所有行星围绕太阳公转，行星采用纯色，暂时没有自转。

效果静态图：
在这里插入图片描述

动画中包括：太阳及各行星，运行轨道，行星公转动画。

先画好草图，设计好大小和位置，根据公转周期计算好动画执行的时间。

html的结构:

一个class为solarsys的div，作为太阳系容器元素，该div的position为relative。

行星轨道和行星都用div，position为absolute。

容器用relative和内部元素采用absolute的定位方式，比较简单的能实现效果，缺点就是大小是固定的。

XML/HTML Code复制内容到剪贴板

<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>

太阳系容器div的css：

定宽，定高，relative定位，页面内剧中对齐。

CSS Code复制内容到剪贴板

.solarsys{
width: 800px;
height: 800px;;
position: relative;
margin: 0 auto;
background-color: #000000;
padding: 0;
transform: scale(1);
}
太阳div的css：

按照设计的大小和位置，设定宽高，left，top。

设定颜色。

通过把boder-radius生成50%，把一个正方形变成圆形。

通过box-shadow的4层颜色设置实现太阳光晕。

CSS Code复制内容到剪贴板

.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 :http://www.qlyl1688.com/product_ycxsys.html ;
}
行星轨道div的css：

假设是水星轨道。

按照设计的大小和位置，设定宽高，left，top。

背景色透明。

通过把boder-radius生成50%，把一个正方形变成圆形。

boder的类型设成虚线。

boder的颜色设成灰色。

宽度设1。

CSS Code复制内容到剪贴板

.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;
}
行星div的css：

假设是水星。

按照设计的大小和位置，设定宽高，left，top。

设置颜色。

通过把boder-radius生成50%，把一个正方形变成圆形。

将transfrom-origin设定成当前div的左上角相对于整个太阳系容器的中心点的横向和纵向的偏移量。加上旋转动画后就是围绕着中心点旋转效果。

做一个animation，引用rotate关键帧动画，线性永久执行，这里的执行时长是根据行星的公转周期计算出来。

CSS Code复制内容到剪贴板

.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;
}
rotate关键帧动画：

逆时针旋转。

CSS Code复制内容到剪贴板

@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
基本结构完成。

仅在chrome中测试过。

全部代码：

XML/HTML Code复制内容到剪贴板

<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>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢

云南仟龙Mark
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5行星环绕,CSS3 星球环绕动画
weixin_34161139的博客
06-30 838
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...
css动画小案例（太阳地球月球运动轨迹）
zhangawei123的博客
09-27 2540
简单的css动画实现太阳地球月球运动轨迹。
纯css3行星围着地球转动画
ICode联盟
06-20 397
下载地址使用css3的属性实现的行星围着地球转动画dd:
CSS3星系轨道3D环绕旋转代码
06-12
一款CSS3实现的星系轨道3D环绕旋转效果代码，其中圆球和光效是图片，主要运动了css的animation，transform，transition属性。
CSS特效003：太阳、地球、月球之间的绕转动画
大剑师兰特的GIS世界
11-09 1087
GPT能够很好的应用到我们的代码开发中，能够提高开发速度。你可以利用其代码，做出一定的更改，然后实现效能。css实战中，这种球体间的旋转，主要通过rotate()旋转函数来实现。实际上，蓝色的地球和黑色的月球并没有发生旋转，只是其父级旋转形成的视觉上的旋转效果。
HTML+css3 前端加载动画loading加载动画，32款网页loading加载动画
02-28
HTML+css3 前端加载动画loading加载动画，32款网页loading加载动画
HTML,CSS前端网页，加一些CSS3动画，暂未接入后端.zip
最新发布
12-14
HTML,CSS前端网页，加一些CSS3动画，暂未接入后端 HTML,CSS前端网页，加一些CSS3动画，暂未接入后端 HTML,CSS前端网页，加一些CSS3动画，暂未接入后端 HTML,CSS前端网页，加一些CSS3动画，暂未接入后端 HTML,CSS前端...
前端HTML----CSS动画特效
04-14
文件格式CSS 特效详情如下： ====进入==== 淡入：fadeIn 翻转进入：flipInY 中心弹入：bounceIn 中心放大：zoomIn 翻转进入：rollIn 光速进入：lightSpeedIn 移入，从左向右：fadeInLeft 移入，从上向下：...
css3实现的星球围绕轨迹转动动画特效源码.zip
11-02
css3实现的星球围绕轨迹转动动画特效源码.zip
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
八大行星网页制作
05-27
关于八大行星的网页制作，包括html详细代码及css样式，比如说锚点的插入，div标签，和类选择器等的综合使用。
CSS3实现五彩3D旋转星球
12-20
CSS3实现五彩3D旋转星球
css3实现行星自转效果动画
ICode联盟
10-28 235
下载地址使用css3代码实现的实现行星自转效果动画dd:
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
weixin_39636696的博客
11-21 390
旋转地球功能实现主要借助于CSS动画效果完成，通过移动地图背景图层，云彩图层等，在视觉上呈现出旋转地球效果。旋转地球最终实现效果如下图所示：旋转地球效果展示设计思路与核心技术旋转地球效果实现主要借助于animation动画属性完成，在动画关键之keyframe编写时移动图片坐标位置，实现背景地图图片位置移动。为体现移动效果，进一步定义了云彩与飞机，飞机居中固定，云彩与地球非同步移动，最终呈现出动态...
围绕旋转动画-小球围绕旋转demo
qq_37612425的博客
10-28 128
围绕旋转-动画demo
纯css3 地球轨迹图 球围着椭圆旋转
qq_39650950的博客
03-25 934
<div class="earth-wrap"> <div class="ring ring1"> <div class="circle circle1"></div> <div class="circle circle2"></div> <div class="circle circle3"></div> ...
HTML+CSS+JS实现 ❤️ 宇宙星球旋转动画特效❤️
java李阳勇的博客
09-03 3267
代码目录： 主要代码实现： 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...
前端实现炫酷动效_web前端炫酷特效-CSS3制作环形星星发光动画
weixin_39638708的博客
12-19 838
html源码：css源码：*{margin:0;padding:0;}html,body{height:100%;}body{background:radial-gradient(ellipse at center,#34679a 0%, #214163 50%, #0d1926 100%);/*径向渐变 椭圆*/}body > div{width:200px;/*宽度 px像素 cm...
js制作的炫酷3D太阳系行星运行效果
kongzhonghu的专栏
06-22 1283
想象着打开网页就能浏览太阳系行星的运行情况，促进我们更好的了解这个宇宙星空，于是找到了这样一段代码可以完美的实现这个功能，通过css和js就可以实现在网页上展示一个完美的太阳系行星的运行情况，效果炫酷，废话不多说，先上个图给大家看看: 具体的代码如下index.html 相关的js代码 在线预览效果css,js制作的在线3D太阳系行星运行展示系统...
用html5 css3制作简易静态网页
06-06
可以使用HTML5和CSS3来制作简易静态网页。HTML5可以用来定义网页的结构和内容，而CSS3可以用来定义网页的样式和布局。以下是一些制作简易静态网页的步骤： 1. 编写HTML代码，包括头部信息、导航栏、内容区域等。 2. 使用CSS3来定义网页的样式，包括字体、颜色、背景、边框等。 3. 使用CSS3来定义网页的布局，包括盒模型、浮动、定位等。 4. 添加交互效果，如鼠标悬停、点击等。 5. 最后进行测试和调试，确保网页的兼容性和稳定性。 以上是制作简易静态网页的基本步骤，具体实现可以根据自己的需求和技能水平进行调整和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值