当前位置： 首页 > Web前端 > CSS

前端日常实战：96#视频演示如何使用纯CSS和D3制作宇宙飞船

时间：2023-03-30 18:06:49 CSS

在太空中穿梭效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击全屏预览链接。https://codepen.io/comehop??e/pen/oMqNmv互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cm48rta源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解释定义dom，spacecraft的意思是宇宙飞船，容器中包含一个元素fins代表尾巴：

显示在中心：主体{边距：0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(black,midnightblue);}绘制飞船的舱室：.spacecraft{width:7em;高度：11em；字体大小：16px；背景：线性渐变（whitesmoke，darkgray）；边界半径：50%/70%70%5%5%；}使用伪元素绘制飞船尾部的火焰：.spacecraft::before{content:'';位置：绝对；宽度：6em；高度：2em；背景色：#444；边界半径：20%；顶部：10em；左：0.5em；z-指数：-1；::after{内容：'';位置：绝对；框大小：边框框；宽度：4em；高度：4em；背景：金色；顶部：10em；左：1.5em;边界半径：80%050%45%/50%080%45%；变换：旋转（135度）；边框：0.5em纯橙色；z-index:-2;}绘制宇宙飞船的侧面尾巴:.fins::before,.fins::after{content:'';位置：绝对；宽度：2em；高度：6em；背景：线性渐变（番茄，深红色）；顶部：7em；}。鳍::之前{左：-2em；border-radius:3em050%100%;}.fins::after{right:-2em;border-radius:03em100%50%;}用径向渐变绘制飞船的舷窗：.spacecraft{background:radial-gradient(circleat3.5em5em,transparent1.5em,lightslategray1.5em,lightslategray2em,transparent2em),径向渐变（圆形3.3em5.2em，深天蓝1.4em，透明1.6em），径向渐变（圆形3.5em5em，白色1.5em，透明1.5em），线性渐变（whitesmoke，darkgray）；}增加飞船喷火动画效果：.spacecraft::after{animation:flame-spout0.3sinfinite;}@keyframesflame-spout{0%,100%{过滤器:opacity(0.1);}50%{过滤器：不透明度（1）；}}绘制下一个星空在dom中添加stars容器，其中包含4个代表星星的子元素：
定义星星的样式：.starsspan{position:absolute;宽度：2px；高度：8px；边界半径：50%；背景色：白色；top:calc(50%-7em);}使用变量将星星分布在水平方向的不同位置：.starsspan{left:calc(var(--left)*1vw);}.starsspan:nth-child(1){--left:20;}.starsspan:nth-child(2){--left:40;}.starsspan:nth-child(3){--left:60;}.starsspan:nth-child(4){--left:80;}使用变量设置星星的大小和不透明度，使每颗星星看起来略有不同：.starsspan{width:calc(var(--size)*1px);高度：计算（var（--size）*4px）；过滤器：不透明度（var（--opacity））;}.starsspan：nth-??child（1）{--size：0.8;--opacity:0.5;}.starsspan:nth-child(2){--size:1.25;--opacity:0.6;}.starsspan:nth-child(3){--尺寸：1.5；--opacity:0.7;}.starsspan:nth-child(4){--size:2;--opacity:0.8;}定义星星漂浮在太空中的动画效果：.starsspan{top:-5vh;动画：星形移动线性无限；}@keyframes星形移动{到{顶部：100vh；}}使用变量设置动画持续时间和延迟时间：.starsspan{animation-duration:calc(var(--duration)*1s);animation-delay:calc(var(--delay)*1s);}.starsspan:nth-child(1){--duration:1;--delay:-0.05;}.starsspan:nth-child(2){--duration:1.5;--delay:-0.1;}.starsspan:nth-child(3){--duration:2;--delay:-0.15;}.starsspan:nth-child(4){--duration:2.5;--delay:-0.2;}隐藏屏幕外的内容:body{overflow:hidden;}接下来用d3批量处理表示星星元素的dom和css变量引入d3库：使用d3创建代表星星的dom元素：constCOUNT_OF_STARS=4;d3.select('.stars').selectAll('span').data(d3.range(COUNT_OF_STARS)).enter().append('span');使用d3给css变量--left,--size,--opacity赋值，--left的取值范围是1到100，--size的取值范围是1到2.5，取值'--opacity'的范围是0.5到0.8：d3.select('.stars').selectAll('span').data(d3.range(COUNT_OF_STARS)).enter().append('span')。style('--left',()=>Math.ceil(Math.random()*100)).style('--size',()=>Math.random()*1.5+1).style('--opacity',()=>Math.random()*0.3+0.5);和d3给css变量--duration和--delay赋值，--duration的取值范围是1到3，--delay的值依次减少0.05：d3.select('.stars').selectAll('span').data(d3.range(COUNT_OF_STARS)).enter().append('span').style('--left',()=>Math.ceil(Math.random()*100)).style('--size',()=>Math.random()*1.5+1).style('--opacity',()=&g吨;Math.random()*0.3+0.5).style('--duration',()=>Math.random()*2+1).style('--delay',(d)=>d*-0.05);删除html文件中的相关dom声明和css文件中的变量声明最后将星数增加到30：constCOUNT_OF_STARS=30;你完成了！

前端日常实战：96#视频演示如何使用纯CSS和D3制作宇宙飞船相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。