如何使用純CSS實現一顆土星的效果

來源：懂視網責編：小采時間：2020-11-27 18:47:48

如何使用純CSS實現一顆土星的效果

如何使用純CSS實現一顆土星的效果:這篇文章給大家介紹的文章內容是關于如何使用純CSS實現一顆土星的效果，有很好的參考價值，希望可以幫助到有需要的朋友。效果預覽代碼解讀定義 dom，容器本身表示土星星球，其中的 ring 元素表示土星環：<p class="saturn">

推薦度：

點擊下載本文 文檔為doc格式

導讀如何使用純CSS實現一顆土星的效果:這篇文章給大家介紹的文章內容是關于如何使用純CSS實現一顆土星的效果，有很好的參考價值，希望可以幫助到有需要的朋友。效果預覽代碼解讀定義 dom，容器本身表示土星星球，其中的 ring 元素表示土星環：<p class="saturn">

這篇文章給大家介紹的文章內容是關于如何使用純CSS實現一顆土星的效果，有很好的參考價值，希望可以幫助到有需要的朋友。

效果預覽

代碼解讀

定義 dom，容器本身表示土星星球，其中的 ring 元素表示土星環：

<p class="saturn">
 <span class="rings"></span>
 </p>

居中顯示：

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%
 );
}

最后，把畫面旋轉一點角度：