行星介绍html页面布局,行星运行轨迹 纯 css + html

最新推荐文章于 2022-07-07 20:57:26 发布
最新推荐文章于 2022-07-07 20:57:26 发布
阅读量352 收藏 1
点赞数
文章标签： 行星介绍html页面布局
行星运行轨迹

body {

margin: 0;

padding: 0;

position: relative;

background-color: #000000;

}

.sunlight {

width: 90px;

height: 90px;

border-radius: 50%;

top: 265px;

left: 638px;

background-color: #F88B3A;

box-shadow: 0 0 15px #F88B3A;

position: absolute;

}

.mercury-track {

width: 100px;

height: 100px;

border-radius: 50%;

top: 259px;

left: 632px;

border: 1px dashed #848484;

position: absolute;

}

.mercury {

width: 10px;

height: 10px;

border-radius: 50%;

top: 310px;

left: 628px;

background-color: #4a5dc5;

position: absolute;

transform-origin: 56px 0;

-webkit-transform-origin: 56px 0;

-moz-transform-origin: 56px 0;

-ms-transform-origin: 56px 0;

-o-transform-origin: 56px 0;

animation: negative-rotate 20s linear infinite;

-webkit-animation: negative-rotate 20s linear infinite;

-moz-animation: negative-rotate 20s linear infinite;

-o-animation: negative-rotate 20s linear infinite;

}

.venus-track {

width: 128px;

height: 128px;

border-radius: 50%;

top: 245px;

left: 618px;

border: 1px dashed #848484;

position: absolute;

}

.venus {

width: 14px;

height: 14px;

border-radius: 50%;

top: 310px;

left: 612px;

background-color: #e45336;

position: absolute;

transform-origin: 71px 0;

-webkit-transform-origin: 71px 0;

-moz-transform-origin: 71px 0;

-ms-transform-origin: 71px 0;

-o-transform-origin: 71px 0;

animation: positive-rotate 22s linear infinite;

-webkit-animation: positive-rotate 22s linear infinite;

-moz-animation: positive-rotate 22s linear infinite;

-o-animation: positive-rotate 22s linear infinite;

}

.earth-track {

width: 170px;

height: 170px;

border-radius: 50%;

top: 223px;

left: 597px;

border: 1px dashed #848484;

position: absolute;

}

.earth {

width: 20px;

height: 20px;

border-radius: 50%;

top: 310px;

left: 588px;

background-color: #687ad2;

position: absolute;

transform-origin: 95px 0;

-webkit-transform-origin: 95px 0;

-moz-transform-origin: 95px 0;

-ms-transform-origin: 95px 0;

-o-transform-origin: 95px 0;

animation: negative-rotate 15s linear infinite;

-webkit-animation: negative-rotate 15s linear infinite;

-moz-animation: negative-rotate 15s linear infinite;

-o-animation: negative-rotate 15s linear infinite;

}

.mars-track {

width: 220px;

height: 220px;

border-radius: 50%;

top: 198px;

left: 572px;

border: 1px dashed #848484;

position: absolute;

}

.mars {

width: 18px;

height: 18px;

border-radius: 50%;

top: 310px;

left: 564px;

background-color: #bb502d;

position: absolute;

transform-origin: 119px 0;

-webkit-transform-origin: 119px 0;

-moz-transform-origin: 119px 0;

-ms-transform-origin: 119px 0;

-o-transform-origin: 119px 0;

animation: negative-rotate 18s linear infinite;

-webkit-animation: negative-rotate 18s linear infinite;

-moz-animation: negative-rotate 18s linear infinite;

-o-animation: negative-rotate 18s linear infinite;

}

.jupiter-track {

width: 290px;

height: 290px;

border-radius: 50%;

top: 162px;

left: 537px;

border: 1px dashed #848484;

position: absolute;

}

.jupiter {

width: 36px;

height: 36px;

border-radius: 50%;

top: 310px;

left: 522px;

background-color: #e6ba35;

position: absolute;

transform-origin: 161px 0;

-webkit-transform-origin: 161px 0;

-moz-transform-origin: 161px 0;

-ms-transform-origin: 161px 0;

-o-transform-origin: 161px 0;

animation: negative-rotate 5s linear infinite;

-webkit-animation: negative-rotate 5s linear infinite;

-moz-animation: negative-rotate 5s linear infinite;

-o-animation: negative-rotate 5s linear infinite;

}

.saturn-track {

width: 380px;

height: 380px;

border-radius: 50%;

top: 116px;

left: 492px;

border: 1px dashed #848484;

position: absolute;

}

.saturn {

width: 34px;

height: 34px;

border-radius: 50%;

top: 310px;

left: 476px;

background-color: #e4cf8c;

position: absolute;

transform-origin: 206px 0;

-webkit-transform-origin: 206px 0;

-moz-transform-origin: 206px 0;

-ms-transform-origin: 206px 0;

-o-transform-origin: 206px 0;

animation: negative-rotate 8s linear infinite;

-webkit-animation: negative-rotate 8s linear infinite;

-moz-animation: negative-rotate 8s linear infinite;

-o-animation: negative-rotate 8s linear infinite;

}

.uranus-track {

width: 462px;

height: 462px;

border-radius: 50%;

top: 75px;

left: 451px;

border: 1px dashed #848484;

position: absolute;

}

.uranus {

width: 30px;

height: 30px;

border-radius: 50%;

top: 310px;

left: 438px;

background-color: #51b0dc;

position: absolute;

transform-origin: 244px 0;

-webkit-transform-origin: 244px 0;

-moz-transform-origin: 244px 0;

-ms-transform-origin: 244px 0;

-o-transform-origin: 244px 0;

animation: positive-rotate 10s linear infinite;

-webkit-animation: positive-rotate 10s linear infinite;

-moz-animation: positive-rotate 10s linear infinite;

-o-animation: positive-rotate 10s linear infinite;

}

.neptune-track {

width: 546px;

height: 546px;

border-radius: 50%;

top: 33px;

left: 408px;

border: 1px dashed #848484;

position: absolute;

}

.neptune {

width: 32px;

height: 32px;

border-radius: 50%;

top: 310px;

left: 394px;

background-color: #596bd4;

position: absolute;

transform-origin: 288px 0;

-webkit-transform-origin: 288px 0;

-moz-transform-origin: 288px 0;

-ms-transform-origin: 288px 0;

-o-transform-origin: 288px 0;

animation: negative-rotate 13s linear infinite;

-webkit-animation: negative-rotate 13s linear infinite;

-moz-animation: negative-rotate 13s linear infinite;

-o-animation: negative-rotate 13s linear infinite;

}

@keyframes positive-rotate {

100% {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

}

}

@-webkit-keyframes positive-rotate {

100% {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

}

}

@-moz-keyframes positive-rotate {

100% {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

}

}

@-ms-keyframes positive-rotate {

100% {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

}

}

@-o-keyframes positive-rotate {

100% {

transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-ms-transform: rotate(360deg);

-o-transform: rotate(360deg);

}

}

@keyframes negative-rotate {

100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

}

}

@-webkit-keyframes negative-rotate {

100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

}

}

@-moz-keyframes negative-rotate {

100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

}

}

@-ms-keyframes negative-rotate {

100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

}

}

@-o-keyframes negative-rotate {

100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

}

}

没有做适配处理，默认以 1366 * 768 分辨率来写的样式，效果如下：

b116d6498eb5

image.png

Zhijian Zhang
关注
行星介绍html页面布局,html5 canvas宇宙中行星运动特效
weixin_28983299的博客
06-03 911
特效描述：html5 canvas 宇宙中 行星运动特效。html5彩色的星球动画、宇宙中行星运行背景动画特效。代码结构1. 引入JS2. HTML代码var scene, camera, renderer, sphere, sphere2, torus, torus2;var shape = [];function init () {var t = THREE;scene = new t.Sce...
行星介绍html页面布局,css3 html5实现太阳系行星公转动画实例
weixin_39790760的博客
06-03 941
本文我们分享用css3的animation画一个太阳系恒星公转的动画，如何实现画椭圆的运行轨迹，最后结合css3的clip-path做一些比较特别的动画。模拟太阳系行情公转动画最终的效果图如下：css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处插入关键帧，浏览器根据关键帧设定的内容做过渡动画。animation一般结合transfor...
八大行星网页制作
05-27
关于八大行星的网页制作，包括html详细代码及css样式，比如说锚点的插入，div标签，和类选择器等的综合使用。
【html + css】星球球体
weixin_45562037的博客
07-07 495
效果视频展示：（html + css）星球球体
星球环绕动画.html
06-15
《前端开发》 使用HBuilder开发的一个星球环绕动画，欢迎大家学习下载
html制作星球,AE科幻星球制作教程
weixin_31082779的博客
06-10 442
只要你熟悉AE，平面的星球是可以直接做出来，那你知道怎么用AE制作炫酷的科幻星球吗?下面教程为你详细讲解科幻星球制作方法，一起来学习吧!1、AE科幻星球制作教程介绍课程是AE三维粒子插件Stardust的使用教学。案例是AE三维粒子插件Stardust制作星球的案例，教程中会有炫酷的科幻星球与AE插件的教学，讲解AE里的插件的使用与特效制作方法。课程适用于影视特效师，设计院校学生及设计爱好者，想要...
纯CSS3绘制太阳系行星动画运动轨迹
09-08
在本教程中，我们将深入探讨如何使用纯CSS3来创建一个引人入胜的太阳系行星动画运动轨迹。CSS3，即层叠样式表第三版，是Web开发中用于描述网页及应用程序外观和表现的样式语言。其强大的功能使得开发者无需...
HTML5行星围绕太阳轨迹运动场景动画特效
06-11
`css`目录则包含样式表文件，它们负责页面的布局和视觉样式。在这个特效中，CSS可能用于设置`<canvas>`的大小和位置，以及可能存在的背景颜色或图案。此外，CSS也可能用于定义行星和太阳的外观，比如大小、颜色、...
纯CSS3绘制的太阳系行星动画运动轨迹效果源码.zip
11-20
在本资源中，我们主要探讨的是如何利用纯CSS3技术来创建一个动态的太阳系行星运动轨迹的效果。这个源码示例提供了一种创新的方法，让网页开发者无需借助JavaScript或其他编程语言，仅通过CSS3就能实现复杂的动画效果...
用html5如何编写星球运动,使用HTML5里的Canvas标签构建粒子星球
weixin_36308543的博客
06-19 190
JavaScript语言：JaveScriptBabelCoffeeScript确定window.onload = function() {window.requestAnimFrame = (function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozReques...
酷炫html5实现太阳系星球演示效果
08-18
酷炫html5实现太阳系星球演示效果
HTML5 canvas太阳系八大行星运行轨道图.zip
07-04
HTML5 canvas太阳系八大行星运行轨道图，鼠标经过目标行星显示行星名称。
3D星球动画html,基于Three.js实现的3D土星（星球）动画
weixin_39700063的博客
06-10 811
JavaScript语言：JaveScriptBabelCoffeeScript确定function getMat(color) {// our material is a phong material, with no shininess (highlight) and a black specularreturn new THREE.MeshPhongMaterial({color: colo...
HTML+CSS绘制太阳系九大行星运行轨迹
自由&不束缚的博客
02-23 4638
HTML+CSS绘制太阳系九大行星运行轨迹 最近正在学习前端的相关知识，学习过程中发现这个项目比较有趣且知识涵盖比较多，所以就写篇博客记录一下，方便以后查看。这是我第一次写技术博客，如遇有缘人觉得写的不好的话，请指点。 首先先展示一下运行效果 原本效果是动态的，但第一次发表，不会导入视频，现只插入图片，以后学会再更改回来。 代码部分 HTML代码 <!DOCTYPE html> &l...
html+css实现星系图
前端成长之路
04-16 2572
01-html+css+js实现时钟 02-html+css+js实现骰子 03-html+css+js实现点名系统 文章目录01-html+css+js实现时钟02-html+css+js实现骰子03-html+css+js实现点名系统前言一、整体效果二、代码实现1.背景图2.主体星系总结 前言 本文通过html和css3D旋转属性实现星系效果。 一、整体效果 整体效果如下： 1、文字逐行、渐变显示； 2、背景星系图旋转； 3、行星绕中心公转； 4、行星自转； 5、行星自身轨道绕行星旋转。 效果图如下
php画星球,html5使用canvas绘制太阳系效果
weixin_42364855的博客
03-09 376
这篇文章主要介绍了html5使用canvas绘制太阳系效果,需要的朋友可以参考下：代码如下:var canvas=document.getElementById("canvas");var cxt=canvas.getContext("2d");function DrawTrack(){for(var i=0;i<8;i++){cxt.beginPath();cxt.arc(500,500,...
html星球背景,HTML5 星球风背景的命令行输入界面
weixin_35868872的博客
06-15 149
CSS语言：CSSSCSS确定* {box-sizing: border-box;}body {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;min-height: 100vh;-webkit-box-pack: center;-webkit-justify-content: center...
8种页面布局
weixin_33806914的博客
12-13 372
APP页面常用的8种页面布局 https://www.cnblogs.com/1024Planet/p/5810164.html#_label01 感谢追寻1024的程序猿的分享 转载于:https://www.cnblogs.com/liyunda/p/10112283.html
HTML+CSS+JS实现 ❤️ 宇宙星球旋转动画特效❤️
java李阳勇的博客
09-03 3706
代码目录： 主要代码实现： css样式： /** * @date 2021/1/20 16:10 */ /* 取消默认间距 */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #fff; outline: none } .container { width: 100%; height: 100%; backgrou...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值