css3动画实现八大行星

话不多说上代码看效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>@keyframes rotate {from {transform: rotate(0);}to {transform: rotate(-360deg);}}* {padding: 0;margin: 0;box-sizing: border-box;}.solarsys {width: 80%;height: 900px;background: #1f1e1e;margin: 0px auto;position: relative;}.solarsys div {position: absolute;border-radius: 50%;}.sun {width: 150px;height: 150px;border-radius: 50%;background: #f05121;box-shadow: 1px 1px 19px 5px #d6452b;position: absolute;top: calc(50% - 75px);left: calc(50% - 75px);}.mercuryOrbit {width: 180px;height: 180px;border: 1px dotted #fff;border-radius: 50%;top: calc(50% - 90px);left: calc(50% - 90px);}.mercury {width: 10px;height: 10px;background: rgb(73, 146, 214);top: calc(50% - 5px);left: calc(50% - 95px);animation: rotate 3s infinite linear;transform-origin: 95px 5px;box-shadow: 1px 0px 5px 2px rgb(73, 146, 214);}.venusOrbit {width: 240px;height: 240px;border: 1px dotted #fff;top: calc(50% - 120px);left: calc(50% - 120px);}.venus {width: 20px;height: 20px;background: rgb(228, 231, 60);top: calc(50% - 10px);left: calc(50% - 130px);animation: rotate 6s infinite linear;transform-origin: 130px 10px;box-shadow: 1px 0px 5px 2px rgb(228, 231, 60);}.earthOrbit {width: 320px;height: 320px;border: 1px dotted #fff;top: calc(50% - 160px);left: calc(50% - 160px);}.earth {width: 16px;height: 16px;background: rgb(75, 177, 224);top: calc(50% - 8px);left: calc(50% - 168px);animation: rotate 11s infinite linear;transform-origin: 168px 6px;box-shadow: 1px 0px 5px 2px rgb(75, 177, 224);position: relative;}.earth::after{content: "";width: 80px;height: 80px;border: 1px dotted #fff;top: calc(50% - 40px);left: calc(50% - 40px);position: absolute;border-radius: 50%;box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.452);}.earth::before{content: "";width: 10px;height: 10px;position: absolute;background: rgba(255, 255, 255);top: calc(50% - 5px);left: calc(50% - 45px);border-radius: 50%;animation: rotate 13s infinite linear;transform-origin: 45px 7px;box-shadow: 0px 0px 3px 2px rgba(255, 255, 255);}.marsOrbit {width: 390px;height: 390px;border: 1px dotted #fff;top: calc(50% - 195px);left: calc(50% - 195px);}.mars {width: 14px;height: 14px;background: rgb(219, 151, 24);top: calc(50% - 7px);left: calc(50% - 202px);animation: rotate 8.5s infinite linear;transform-origin: 202px 7px;box-shadow: 1px 0px 5px 2px rgb(219, 151, 24);}.jupiterOrbit {width: 500px;height: 500px;border: 1px dotted #fff;top: calc(50% - 250px);left: calc(50% - 250px);}.jupiter {width: 30px;height: 30px;background: rgba(204, 204, 204);top: calc(50% - 15px);left: calc(50% - 265px);animation: rotate 10s infinite linear;transform-origin: 265px 15px;box-shadow: 1px 0px 5px 2px rgba(204, 204, 204);}.saturnOrbit {width: 620px;height: 620px;border: 1px dotted #fff;top: calc(50% - 310px);left: calc(50% - 310px);}.saturn {width: 18px;height: 18px;background: rgb(118, 119, 44);top: calc(50% - 9px);left: calc(50% - 319px);animation: rotate 8.9s infinite linear;transform-origin: 319px 9px;box-shadow: 1px 0px 5px 2px rgb(118, 119, 44);}.uranusOrbit {width: 720px;height: 720px;border: 1px dotted #fff;top: calc(50% - 360px);left: calc(50% - 360px);}.uranus{width: 26px;height: 26px;background: rgb(44, 110, 119);top: calc(50% - 13px);left: calc(50% - 373px);animation: rotate 12s infinite linear;transform-origin: 373px 13px;box-shadow: 1px 0px 5px 2px rgb(44, 110, 119);}.neptuneOrbit{width: 800px;height: 800px;border: 1px dotted #fff;top: calc(50% - 400px);left: calc(50% - 400px);}.neptune{width: 22px;height: 22px;background: rgb(194, 190, 235);top: calc(50% - 11px);left: calc(50% - 411px);animation: rotate 16s infinite linear;transform-origin: 411px 11px;box-shadow:1px 0px 5px 2px rgb(194, 190, 235) ;}</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>

transform-orign: x y; 作用定义元素绕什么旋转
绕圆心旋转
x 表示轨道半径 + 球体半径
y 表示球体半径：
绕轴旋转
left right center x周转
top bottom center y 轴转
length z 轴

以下放效果图

css3动画实现八大行星相关推荐

python演示动画_Python八大行星漂亮动画演示-Go语言中文社区
"""一个简单的演示八大行星公转的动画,采用arcade街机游戏模块制作,安装Arcade请用pip install arcade --user. A simple an ...
Python八大行星漂亮动画演示
"""一个简单的演示八大行星公转的动画,采用arcade街机游戏模块制作,安装Arcade请用pip install arcade --user. A simple an ...
【py】Python八大行星漂亮动画演示
Python八大行星漂亮动画演示 2019-05-22 07:32:03 李兴球阅读数 771更多分类专栏: arcade 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议, ...
android fragment中引入自定义view_厉害了，用Android自定义View实现八大行星绕太阳3D旋转效果...
作者:史蒂芬诺夫斯基链接:https://www.jianshu.com/p/2954f2ef8ea5 好久没写View了,最近恰巧遇到一个八大行星绕太阳旋转的假3D效果,写完之后感觉效果还不错.能 ...
android立体3D效果_Android实现八大行星绕太阳3D旋转效果
code小生一个专注大前端领域的技术平台公众号回复Android加入安卓技术群作者:史蒂芬诺夫斯基链接:https://www.jianshu.com/p/2954f2ef8ea5声明:本文已获史 ...
实现八大行星绕太阳3D旋转效果，这波操作不来喊个666？
/ 今日科技快讯 / 针对媒体报道的关于法拉第未来进行重组以及贾跃亭或辞去CEO职务的内容,FF发布声明称,已正式进入公司顶层治理架构变革的执行阶段,近期会公布相关细节.对于贾跃亭的债务问题, ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...

css3动画实现八大行星

css3动画实现八大行星

css3动画实现八大行星相关推荐

最新文章

热门文章