CSS 实现土星外貌

兴趣使然的南巷书生

已于 2022-09-17 19:49:51 修改

阅读量433

点赞数 5

文章标签： css css3 前端

于 2022-09-17 19:42:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_58459674/article/details/126909595

版权

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>

主要用的技术点：

transform
radial-gradient函数。

这里是一个基于hexo搭建的一个博客:https://nanxiangscholar.github.io/
欢迎访问!