实现太阳系行星公转动画实例（CSS+HTML5 源码）
2024-05-07 05:34:27
实现太阳系行星公转动画实例（CSS+HTML5 源码）
- 效果图
- 源代码（CSS+HTML5）
效果图
源代码（CSS+HTML5）
<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: 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; } @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> 实现太阳系行星公转动画实例（CSS+HTML5 源码）相关推荐
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- html+div+动画效果,html+css3太阳系行星运转动画效果的实现代码
原标题:html+css3太阳系行星运转动画效果的实现代码 做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星 ...
- css3运动后留下轨迹尾巴_巧妙利用CSS3实现太阳系行星公转运动轨迹
巧妙利用CSS3实现太阳系行星公转运动轨迹 前段时间在博客园看到一篇很不错的文章,就是介绍如何用CSS3来实现太阳系中行星的运动.本小姐处于好奇心从头到完整的看完了.突然发现好奇不仅仅害死猫,也可以增 ...
- html直播动画,HTML5 直播疯狂点赞动画实现代码 附源码
直播有一个很重要的互动: 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都 我们先来看效果 ...
- 疯狂html附源码,科技常识：HTML5 直播疯狂点赞动画实现代码 附源码
今天小编跟大家讲解下有关HTML5 直播疯狂点赞动画实现代码 附源码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 直播疯狂点赞动画实现代码 附源码 的相关资料,希望小伙伴们看 ...
- html5直播源码,HTML5 直播疯狂点赞动画实现代码 附源码
直播有一个很重要的互动:点赞. 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出 ...
- java 太阳系 多线程_25个CodePen上激发你创作灵感的动画案例，附源码
作品来源 | https://codepen.io/ 文章整理 | 杨小二 CodePen是很多程序员用来展示代码创作的首选在线工具.今天,我为大家精选的25个CodePen上CSS动画展示案例,这 ...
- html5鼠标悬停提示框,HTML5鼠标悬停动画提示框特效源码，前端必备
效果图 今天给各位官人带来的是,HTML5鼠标悬停动画提示框特效源码! 效果炫图生动,给网站带来较好的交互体验! 由于代码过长需要文档版源码来我的前端群581549454,已上传到群文件 废话不多说, ...
- 25个CodePen上激发你创作灵感的动画案例，附源码
作品来源 | https://codepen.io/ 文章整理 | 杨小二 CodePen是很多程序员用来展示代码创作的首选在线工具.今天,我为大家精选的25个CodePen上CSS动画展示案例,这 ...
最新文章
- 经典算法笔记：无监督算法（聚类、降维）
- 小白html图片添加文字,小白爬虫入门——爬取图片和文字（超详细）
- CFileFind 遍历目录与子目录
- TCP滑窗与拥塞控制
- python能熔断吗_在大型项目上，Python 是个烂语言吗？
- axure教程：产品设计流程图
- 通过有向图的可达矩阵判断有向图的连通类型
- 湖南省委短信平台改造方案
- android toast 带图片,Android 带图片的Toast
- 磁性元件：初始磁导率、有效磁导率、品质因数、矫顽力、电感因数。。。。。
- NTFS与FAT32区别
- [大话设计模式C++版] 第7章 为别人做嫁衣 —— 代理模式
- 使用kubeadm安装k8s
- Python网络编程自动化（HCIA）
- cc链2(小宇特详解)
- Java实现基于朴素贝叶斯的情感词分析
- send函数和recv函数
- Unity事件分发器
- css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果（代码实例）
- python基于win32实现梦幻西游手游后台鼠标键盘