CSS 实现土星外貌
效果展示:
CSS部分:
*{
padding: 0;
margin: 0;
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.saturn {
width: 20em;
height: 20em;
font-size: 20px;
position: relative;
transform: rotate(-15deg);
}
.saturn::before,
.saturn::after {
content: '';
position: absolute;
width: 9em;
height: 9em;
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%);
border-radius: 50%;
left: calc((20em - 9em) / 2);
top: calc((20em - 9em) / 2);
}
.saturn::before {
clip-path: inset(50% 0 0 0);
}
.saturn::after {
clip-path: inset(0 0 50% 0);
}
.rings {
position: absolute;
width: inherit;
height: inherit;
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%);
transform: rotateX(75deg);
}
HTML部分:
// saturn容器本身表示土星星球,其中的 rings 元素表示土星环
<div class="saturn">
<span class="rings"></span>
</div>
主要用的技术点:
这里是一个基于hexo搭建的一个博客:https://nanxiangscholar.github.io/
欢迎访问!