HTML5 + CSS3 实现地球绕太阳公转
使用的是正面视角,主要是用 HTML5 + CSS3 来实现,JS只是用来画图。
test.html:
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><title>地球-太阳自转与公转</title> <link type="text/css" rel='stylesheet' href="test.css"></link> </head> <body> <div class="box"><canvas id="sun" width="150px" height="150px"></canvas><canvas id="earth" width="50px" height="50px"></canvas></div><script src="test.js"></script> </body> </html>
注意<canvas>是行内置换元素,可以设置宽高和内外边距。
test.css:
*{margin: 0;padding: 0; } .box{width: 150px;height: 150px;margin: 100px auto;position: relative;transform-style: preserve-3d;/*perspective: 10000px;*/animation: sun linear 365s infinite; /*地球公转*/ } #sun{position: absolute;animation: sun linear 26.7s infinite; /*太阳自转+误差*/ } #earth{margin: 50px;position: absolute;transform: translateZ(600px);animation: earth linear 1s infinite; /*地球自转*/ } @keyframes sun{from{transform: rotateY(0deg);}to{transform: rotateY(360deg);} } @keyframes earth{from{transform: translateZ(600px) rotateY(0deg);}to{transform: translateZ(600px) rotateY(360deg);} }
其中1 s = 1 天。
.box加上一个较大的 perspective 属性,想象自己漂在太空中较远处某个点观察地球和太阳;不加 perspective 属性相当于站在无穷远处观察。
test.js:
var sun = document.getElementById("sun").getContext('2d'),earth = document.getElementById('earth').getContext('2d'),gra1 = sun.createRadialGradient(75,75,0,75,75,75),gra2 = earth.createRadialGradient(25,25,0,25,25,25); gra1.addColorStop(0,'#ffff00'); gra1.addColorStop(1,'#ff9900'); sun.arc(75,75,75,0,2 * Math.PI); sun.fillStyle = gra1; sun.fill(); gra2.addColorStop(0,'#78b1e8'); gra2.addColorStop(1,'#1c4364'); earth.arc(25,25,25,0,2 * Math.PI); earth.fillStyle = gra2; earth.fill();
效果图:
转载于:https://www.cnblogs.com/lalong/p/9692579.html
HTML5 + CSS3 实现地球绕太阳公转相关推荐
- HTML5 CSS3 实现地球绕太阳公转
使用的是正面视角,主要是用 HTML5 CSS3 来实现,JS只是用来画图. test.html: <!DOCTYPE html> <html> <head>< ...
- html制作地球自转,利用CSS3实现地球自转
这篇文章主要介绍了关于利用CSS3实现地球自转,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 CSS3实现地球自转,不可思议啊,不过确实可以实现,不信的朋友可以祥看本文,附送源码 最终 ...
- 推荐7款新鲜出炉的HTML5/CSS3应用
1.HTML5/CSS3发光文字可自定义文字色彩效果很赞 要分享的这款HTML5/CSS3文字效果很帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色. 在线演示 源码下载 2.H ...
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...
- html语言字体是否依赖客户端,【前端面试】HTML5+CSS3初级面试1
最近刚好在看前端的面试,把看到的内容总结一下,方便大家一起学习. 1.简单说一下对HTML5+CSS3的了解. Html5和CSS3不仅是两项新的Web技术标准,而且代表了下一代HTML和CSS技术. ...
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
- HTML5/CSS3系列教程:使用SVG图片
为什么80%的码农都做不了架构师?>>> 日期:2013-3-25 来源:GBin1.com 在我们开始使用SVG前,让我们先了解一下 SVG,并且解释一下为什么使用SVG. ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语, ...
最新文章
- 江西教育考试院2021年高考成绩查询入口,2021年江西高考网上志愿填报入口:江西省教育考试院...
- 【 FPGA 】超声波测距小实验(一)
- 1乘到100 python_python每日一练之如何计算你的应发奖金?
- framework之Activity启动流程(基于Android11源码)
- pybind11传输文件
- php 线程锁,如何使用python线程锁(实例解析)
- 在c语言中函数的定义变量的值为,变量定义(C语言中变量的声明和定义)
- (百万浏览量!)超详细MySQL安装及基本使用教程(史上最详细)
- 转:跨dll操作fopen的返回值导致出错
- C++面向对象笔记:构造、析构函数、成员函数
- LeetCode题库10:正则表达式匹配——JavaScript解答
- 三星电视机的极光TV显示服务器异常,三星液晶电视机故障有哪些 三星液晶电视机故障解决方法【图文】...
- 用deque模拟栈解决八皇后问题
- 多媒体计算机主机有哪些硬件,现在市场上多媒体电脑主要有哪些硬件部分组成?...
- 向jre中添加安全证书
- 蒸汽密度的计算公式,蒸汽流量计密度补偿计算公式
- 去除word转pdf时的图片黑边
- IOC BeanFactory XML之旅
- HPE MSA存储的高性能连接解决方案
- 48V LDO三端稳压IC 60v 100V 300V电源降压芯片系统解决方案
热门文章
- [转载]麦凯66表格
- excel打开2个独立窗口_在716团队学习2个月了,我的感受:有成长,有震撼,为我打开了一扇门...
- 徽章 css_蓝色徽章
- Java Bean转Map问题总结
- 开放数据平台、助力国家实验室:盘点默默耕耘在数据科学领域的清华力量
- Centos5.8 安装SVN并配置HTTP访问
- 远程集中抄表系统四表合一由武汉七叶研发
- 基于RK3399分析Linux系统下的CPU时钟管理 - 第3篇
- 硬件raid5和软raid_常用硬件RAID
- oracle怎么查询每天的库存,一个oracle定时任务作业(生产实际里用),查询医院药房药库账目不相等的库存项目...