纯CSS绘制一个美美哒月亮-一一网

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

大佬们各显神通，绘制的月亮和动画一个比一个漂亮，特来学习一下，相关参考链接留在文章底部。

圆月基调

月亮是晚上出现的，所以背景自然是黑色。

画圆咱们就不多说了，一个border-radius: 50%搞定。

基本框架代码如下：

<!DOCTYPE html>
<title>
    只画月亮
</title>
<body>
    <div class="moon"></div>
</body>
<style>
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: black;
    }

    .moon {
        width: 200px;
        height: 200px;
        background: yellow;
        border-radius: 50%;
    }
</style>
</html>
复制代码

基本展示效果如图：

嗯，初步效果看着很不错，尤其我这种近视眼，月晕都不用加了…

月光晕

使用box-shadow可以添加阴影效果，我们来试试看：

box-shadow: x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色;
复制代码

经过尝试，我们设定两层的光晕：

box-shadow: 0 0 30px 0px yellow, 0 0 100px 0 white;
复制代码

效果如下图所示：

让圆变得立体起来

目前发现有以下几种策略：

渐变色背景

比如我们将月亮的背景色设置为:

background-image: linear-gradient(
            45deg,
            lightyellow 0%,
            yellow 90%,
            yellow 100%
        );
复制代码

效果如下：

添加线条

从大佬文章中学到的，添加弯曲线条：

.moon {
    // 其他代码
    position: relative;
}
.line {
        width: 100%;
        height: 100%;
        background-color: linear-gradient(
            45deg,
            lightyellow 0%,
            yellow 90%,
            yellow 100%
        );
        border: solid 5px white;
        border-radius: 50%;
        margin: -0.5px;
        position: absolute;
        box-sizing: border-box;
        transform: rotateY(45deg);
    }
    .line2 {
        width: 100%;
        height: 100%;
        background-color: linear-gradient(
            45deg,
            lightyellow 0%,
            yellow 90%,
            yellow 100%
        );
        border: solid 5px white;
        border-radius: 50%;
        margin: -0.5px;
        position: absolute;
        box-sizing: border-box;
        transform: rotateY(60deg);
    }

    .line3 {
        width: 100%;
        height: 100%;
        background-color: linear-gradient(
            45deg,
            lightyellow 0%,
            yellow 90%,
            yellow 100%
        );
        border: solid 5px white;
        border-radius: 50%;
        margin: -0.5px;
        position: absolute;
        box-sizing: border-box;
        transform: rotateY(75deg);
    }
复制代码