下面小编就为大家带来一篇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太阳系行星运转动画效果的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
三星新手机或重新用回LCD屏幕 OLED价格硬伤仍未解决

三星新手机或重新用回

韩国本地媒体ETNews报道称,三星规划中的GalaxyA2019产
网联平稳度过"双11"大考 支付机构业务迁移基本完成

网联平稳度过"双11"

业内人士表示,网联平稳度过了“双十一”大考,非银行支付
苦苦等快递的日子,可能就要到头了!

苦苦等快递的日子,可能

又一年双11落幕了,你购物清单里的东西都买齐了吗?心仪的
金山软件第三季度亏损近6000万 雷军称现行游戏承压

金山软件第三季度亏损

尽管金山软件以办公软件闻名,是老牌的应用软件和互联网
投资者:市场对FANG已经不再追捧 正在努力寻找替代品

投资者:市场对FANG已

Bleakley咨询集团首席投资官彼得·博克瓦尔(Peter Booc
百度被北京通信管理局列入电信经营不良名单 遭罚2万

百度被北京通信管理局

依据《电信业务经营许可管理办法》对百度公司实行了行
最新文章
详解 html area标签

详解 html area标签

area 元素总是嵌套在 <map> 标签中。本文重点给大家介
HTML中两个tabs导航冲突问题的解决方法

HTML中两个tabs导航冲

这篇文章主要介绍了HTML中两个tabs导航冲突问题的解决
详解前端在html页面之间传递参数的方法

详解前端在html页面之

这篇文章主要介绍了详解前端在html页面之间传递参数的
详解HTML onfocus获得焦点和onblur失去焦点事件

详解HTML onfocus获得

这篇文章主要介绍了详解HTML onfocus获得焦点和onblur
HTML如何在两个div标签中间画一条竖线

HTML如何在两个div标

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

多种实例解析HTML表单

这篇文章主要以多种实例的方式帮助大家了解分析HTML表

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

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