这篇文章给大家介绍的文章内容是关于如何使用纯css实现一颗土星的效果，有很好的参考价值，希望可以帮助到有需要的朋友。
效果预览
代码解读
定义 dom，容器本身表示土星星球，其中的 ring 元素表示土星环：
居中显示：
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black;}
定义容器尺寸：
立即学习“前端免费学习笔记（深入）”；
.saturn { width: 20em; height: 20em; font-size: 20px;}
画出土星星球（此为草稿，后面还会细化）：
.saturn { position: relative;}.saturn::before,.saturn::after { content: ''; position: absolute; width: 9em; height: 9em; background: linear-gradient( palegoldenrod 0%, tan 10%, burlywood 30%, palegoldenrod 60%, darkgray 100% ); border-radius: 50%; left: calc((20em - 9em) / 2); top: calc((20em - 9em) / 2);}
画出土星环（此为草稿，后面还会细化）：
.rings { position: absolute; width: inherit; height: inherit; background: radial-gradient( transparent 35%, dimgray 40%, slategray 50%, transparent 60%, dimgray 60%, slategray 70%, transparent 70% );}
改变观察土星环的视角：
.rings { transform: rotateX(75deg);}
为了使土星呈现被土星环环绕的效果，把土星分为上下两半，使它们和土星环的图层顺序从底到顶依次为：星球的下半部、土星环、星球的上半部：
.saturn::before { clip-path: inset(50% 0 0 0);}.saturn::after { clip-path: inset(0 0 50% 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,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::before,.saturn::after { background: radial-gradient( circle at top, transparent 40%, black ), radial-gradient( transparent 62%, black ), 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,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);}
大功告成！
相关推荐：
如何使用CSS和D3实现无尽六边形空间的效果
如何利用css画出一只小鸟(代码)
以上就是如何使用纯CSS实现一颗土星的效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610891.html
微信扫一扫 
支付宝扫一扫 
