下面小编就为大家带来一篇html+css3太阳系行星运转动画效果的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转。

效果静态图:

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

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

html的结构:

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

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

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

太阳系容器div的css:

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

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

太阳div的css:

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

设定颜色。

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

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

.sun{ left:357px;top:357px;height:90px;width:90px;background-color:rgb(248,107,35);border-radius:50%;box-shadow:5px5px10pxrgb(248,107,35),-5px-5px10pxrgb(248,107,35),5px-5px10pxrgb(248,107,35),-5px5px10pxrgb(248,107,35);position:absolute;margin:0;}

行星轨道div的css:

假设是水星轨道。

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

背景色

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

boder的类型设成虚线。

boder的颜色设成灰色。

宽度设1。

.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关键帧动画,线性永久执行,这里的执行时长是根据行星的公转周期计算出来。

.mercury{ left:337.5px;top:395px;height:10px;width:10px;background-color:rgb(166,138,56);border-radius:50%;position:absolute;transform-origin:62.5px5px;animation:rotate1.5sinfinitelinear;}

rotate关键帧动画:

逆时针

@keyframesrotate{ 100%{transform:rotate(-360deg);}}

基本结构完成。

仅在chrome中测试过。

全部代码:


以上这篇html+css3太阳系行星运转动画效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
马斯克退市第一枪:AI芯片半年上市 完全自动驾驶来了

马斯克退市第一枪:AI

马斯克又扔出第一颗“炸弹”:Autopilot 3.0未来4到6个
报告:Apple Pay全球用户2.52亿 国际用户超美国用户

报告:Apple Pay全球用

市场研究公司Loup Ventures的最新报告显示,全球约有20%
那个骗人的硅谷榨汁机,在中国复活了

那个骗人的硅谷榨汁机

骗子太多,傻子不够用了。
台积电工厂受计算机病毒感染 新款iPhone出产或推迟

台积电工厂受计算机病

尽管台积电表示制造业务在周一已经完全恢复,然而这次病
市值跌2800亿 人民还想念这样的周鸿祎吗?

市值跌2800亿 人民还

这样的周鸿祎,人民还会想念吗?证监会还会再次拥抱吗?
苹果定制语言模型 可提升Siri本地地名识别度

苹果定制语言模型 可

苹果表示公司开发了一种定制语言模型,融合了用户所在地
最新文章
HTML如何在两个div标签中间画一条竖线

HTML如何在两个div标

最近项目经理交小编一个活儿,需要在界面当中画一条竖线
多种实例解析HTML表单form的使用方法

多种实例解析HTML表单

这篇文章主要以多种实例的方式帮助大家了解分析HTML表
Html+CSS绘制三角形图标

Html+CSS绘制三角形图

这篇文章主要为大家详细介绍了Html+CSS绘制三角形图标
HTML的checkbox和radio样式美化的简单实例

HTML的checkbox和radi

下面小编就为大家带来一篇HTML的checkbox和radio样式
浅谈html标签的显示模式(块级标签,行内标签,行内块标签)

浅谈html标签的显示模

下面小编就为大家带来一篇浅谈html标签的显示模式(块
html+css3太阳系行星运转动画效果的实现代码

html+css3太阳系行星

下面小编就为大家带来一篇html+css3太阳系行星运转动

联系我们 | 网站地图 | 最近更新 | Tags标签云

©CopyRight 2006-2016 Lovean.Com Inc All Rights Reserved.