原来3D太空行星的轨迹是这样画的
我正在参加中秋创意贡献大赛。详情请见：中秋创意投稿大赛背景欢迎来到“前端胖头鱼”公众号，也许你从未见过面，但很有可能来不及遇见你。点击查看太阳、地球、月球3D自转点击查看3D太阳、地球、月球自转2点击查看3D太阳、地球、月球自转源码moon看着月亮，谈工作，谈理想，想想还是挺惬意的。抬头仰望天空，想知道太阳、地球、月亮的运行轨迹是如何通过css3实现的吗？来吧，本文将和你从零开始学习如何绘制3D球体，如何绘制满天繁星，如何实现行星轨迹3D地图的关键元素。行星轨道3D小球怎么画也可以点这里直接查看，效果更佳先欣赏几张图画球之前先欣赏几张图。隔着屏幕，小松鼠《冰河世纪》似乎都那么敏感。枪穿过监视器的鼻子？摸摸狗的头，画一个大家都知道的圆圈。看完上图，聪明的你一定猜到了。我们只需要在2D平面上加竖线几天，3D的感觉就出来了。html
CSS。球容器{宽度：200px;高度：200px；边界半径：50%；视角：500px；位置：相对；}.ball{变换样式：保留3d；位置：绝对；宽度：100%；高度：100%；}.ball-bg{宽度：100%；100%；位置：绝对；边界半径：50%；background-image:linear-gradient(45deg,#ff9a9e0%,#fad0c499%,#fad0c4100%);}通过上面的代码，我们得到的是一个粉红色的圆圈，接下来试试加几行，可以吗添加4条垂直线以获得3D感觉。球线{宽度：100%；高度：100%；背景颜色：透明；边框：纯色0.5px#fad0c4；边界半径：50%；边距：-0.5px；位置：ab溶质;box-sizing:border-box;}.??ball-line:nth-of-type(1){transform:rotateY(45deg);}.ball-line:nth-of-type(2){transform:rotateY(90deg);}.ball-line:nth-of-type(3){transform:rotateY(135deg);}.ball-line:nth-of-type(4){transform:rotateY(180deg);}让线不要太粗，影响整体的球感。我们添加了0.5px，看起来有点3D。最后让小球旋转，尽量让小球旋转@keyframesrotate{0%{transform:rotateY(0)rotateX(0);}100%{变换：旋转Y(360deg)旋转X(360deg);}}.ball{/*添加动画*/动画：旋转10s无限线性；}旋转的3D球随便画一个，再画一个星空。闭上眼睛，想想记忆中的夜空。闪烁的星星是那么平静安详，像明亮的眼睛和闪闪发光的灯火。银灯dom结构
keycss@keyframesshine{0%{opacity:0.5;}100%{不透明度：1;}}keyjs考虑到星星数量较多，最好有不同的宽高。这里我们使用js动态生成starsconst$=document.querySelector.bind(document);const$body=$("body");constcanvasWidth=$body.offsetWidth;constcanvasHeight=$body.offsetHeight;//使用自定义样式创建一个domconstcreateElement=(styles,tag="div")=>{constele=document.createElement(tag);Object.keys(styles).forEach((attr)=>{ele.style[attr]=styles[attr];});返回元素；};constdrawStars=()=>{//创建文档片段，缓存dom片段，reducedom操作const$starFragment=document.createDocumentFragment();const$stars=$(".stars");/*//创建任意数量的星星1.不同的位置2.不同的大小3.不同的动画延迟*/constcreateStar=(size,num)=>{while(num--){constleft=Math.random()*(canvasWidth-size)+"px";consttop=数学。随机的()*(canvasHeight-尺寸)+"px";constwidth=size+"px";常量延迟=数学。随机（）*5；conststyles={width,height:width,left,top,borderRadius:"50%",position:"absolute",background:"#ffffff",animation:`shine2slinear${delay}sinfinite`,};const$star=createElement(样式);$starFragment.appendChild($star);}};//创建不同大小的星星createStar(1,500);创造之星(2,40);创造之星(3,30);创造之星(4,20);$stars.appendChild($starFragment)};绘制星星（）；太阳、地球、月球运动全景图有了星空背景和3D球体的基础，我们就可以开始绘制真实的轨迹图了！！！先画出自己旋转的太阳。太阳无疑是最亮的幼崽，先把他画出来吧。