前端日常实践：92#视频演示如何用纯CSS制作逼真的土星
时间：2023-04-05 21:23:09
HTML5
效果预览按右边“点击预览”按钮在当前页面预览，点击链接全屏预览.https://codepen.io/comehop??e/pen/EpbaQX互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cBdyeTw源码下载每日前端实战系列的所有源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解释定义dom，容器本身代表土星行星，其中的环元素代表土星环：
显示在中心：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.saturn{width:20em;高度：20em；font-size:20px;}绘制土星行星（这是草稿，稍后会细化）：.saturn{position:relative;}.saturn::before,.saturn::after{content:'';位置：绝对；宽度：9em；高度：9em；背景：线性渐变（palegoldenrod0%，tan10%，burlywood30%，palegoldenrod60%，darkgray100%）；边界半径：50%；左：计算（（20em-9em）/2）；top:calc((20em-9em)/2);}画土星环（这是草稿，后面会细化）：.rings{position:absolute;宽度：继承；身高：继承；背景：radial-gradient(transparent35%,dimgray40%,slategray50%,transparent60%,dimgray60%,slategray70%,transparent70%);}改变土星环的视角：.rings{transform:rotateX(75deg);}为了让土星看起来被土星环包围，将土星分为上半部和下半部，这样它们和土星环从下到上的层次顺序是：行星的下半部，土星环土星和行星的上半部分:.saturn::before{clip-path:inset(50%000);}.saturn::after{clip-path:inset(0050%0);}至此土星的整体结构就画好了，接下来细化细节为土星环涂上丰富的渐变色：.rings{background:radial-gradient(rgba(24,19,25,0)0%,rgba(53,52,51,0)34%,rgba(55,54,52,1)36%,rgba(56,55,53,1)37%,rgba(68,67,66,1)38%,rgba(56,55,53,1)39%,rgba(68,67,66,1)40%,rgba(56,55,53,1)41%,rgba(87,77,76,1)42%,rgba(87,77,76,1)44%,rgba(113,110,103,1)46%,rgba(113,110,103,1)48%,rgba(113,98,93,1)49%,rgba(113,98,93,1)51%,rgba(122,115,105,1)52%,rgba(113,98,93,1)53%,rgba(113,98,93,1)54%,rgba(122,115,105,1)55%,rgba(106,99,89,1)56%,rgba(106,99,89,1)58%,rgba(79,76,76,0)60%,rgba(65,64,70,1)61%,rgba(65,64,70,1)62%,rgba(90,85,89,1)63%,rgba(78,74,73,1)65%,rgba(78,73,74,1)67%,rgba(78,73,74,0)68%,rgba(78,73,75,1)69%,rgba(78,73,75,1)70%,rgba(78,73,76,0)71%,rgba(77,72,76,0)72%,rgba(24,19,25,0)100%);}用丰富的渐变画行星：.saturn::before,.saturn::after{background:linear-gradient(rgba(212,203,174,1)0%,rgba(212,203,174,1)10%,rgba(221,203,157,1)15%,rgba(221,203,157,1)17%,rgba(213,181,143,1)22%,rgba(213,181)26%,rgba(208,180,158,1)32%,rgba(208,180,158,1)36%,rgba(218,188,162,1)37%,rgba(218,188,162,1)39%,rgba(211,184,157,1)41%,r211,184,157,1)49%,rgba(205,186,156,1)51%,rgba(205,186,156,1)52%,rgba(202,176,153,1)53%,rgba(202,176,153,1)65%,rgba17,648,17%,rgba(190,177,145,1)80%,rgba(150,144,130,1)91%,rgba(150,144,130,1)95%,rgba(131,129,117,1)97%,rgba(131,129,117,1)100%);给星球添加光照效果：.saturn::before,.saturn::after{背景：径向渐变（顶部圆圈，透明40%，黑色），径向渐变（透明62%，黑色），线性渐变（rgba（212,203,174,1）0%，rgba（212,203,174，1)10%,rgba(221,203,157,1)15%,rgba(221,203,157,1)17%,rgba(213,181,143,1)22%,rgba(213,181,143,1)26%,rgba(208,180,158,1)32%,rgba(208,180,158,1)36%,rgba(218,188,162,1)37%,rgba(218,188,162,1)39%,rgba(211,184,157,1)41%,rgba(211,184,157,1)49%,rgba(205,186,156,1))51%,rgba(205,186,156,1)52%,rgba(202,176,153,1)53%,rgba(202,176,153,1)65%,rgba(190,177,145,1)68%,rgba(190,177,145,1)80%,rgba(150,144,130,1)91%,RGBA(150,144,130,1)95%,rgba(131,129,117,1)97%,rgba(131,129,117,1)100%);}最后，将屏幕旋转一个小角度：.saturn{transform:rotate(-15deg);}大功告成！
