纯css画一个月亮的天气图标

效果

效果图如下

实现思路

1. 使用box-shadow进行构建
2. 星星的样式，有闪烁的动画
3. 月亮的样式，有弧形的上下摇摆动画

dom结构

用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写星星的样式，after伪元素画月亮。

<div class="container">
    <div class="starry"></div>
</div>

css样式

1、定义父容器样式，控制图标位置，顺便给整个页面加个背景色，方便预览

body{
    background: rgba(73,74,95,1);
}

.container{
    width: 170px;
    height: 170px;
    position: relative;
    margin: 250px auto;
}

2、星星样式，使用box-shadow画多个有黑有白的点

.starry{
    width: 4px;
    height: 4px;
    position: absolute;
    top: 150px;
    left: 80px;
    margin-left: -10px;
    background: #fff;
    border-radius: 50%;
    opacity: 1;
    box-shadow: #fff 26px 7px 0 -1px,
        rgba(255,255,255,0.1) -36px -34px 0 -1px,
        rgba(255,255,255,0.1) -51px -34px 0 -1px,
        #fff -52px -62px 0 -1px,
        #fff 14px -37px,
        rgba(255,255,255,0.1) 41px -19px,
        #fff 34px -50px,
        rgba(255,255,255,0.1) 14px -71px 0 -1px,
        #fff 64px -21px 0 -1px,
        rgba(255,255,255,0.1) 32px -85px 0 -1px,
        #fff 64px -90px,
        rgba(255,255,255,0.1) 60px -67px 0 -1px,
        #fff 34px -127px,
        rgba(255,255,255,0.1) -26px -103px 0 -1px;
    animation: starry_star 5s ease-in-out infinite;
}

3、星星的动画，将box-shadow画好的点，黑的变白的，白的变黑的，从而实现闪烁的效果

@keyframes starry_star{
    50%{
        box-shadow: rgba(255,255,255,0.1) 26px 7px 0 -1px,
        #fff -36px -34px 0 -1px,
        #fff -51px -34px 0 -1px,
        rgba(255,255,255,0.1) -52px -62px 0 -1px,
        rgba(255,255,255,0.1) 14px -37px,
        #fff 41px -19px,
        rgba(255,255,255,0.1) 34px -50px,
        #fff 14px -71px 0 -1px,
        rgba(255,255,255,0.1) 64px -21px 0 -1px,
        #fff 32px -85px 0 -1px,
        rgba(255,255,255,0.1) 64px -90px,
        #fff 60px -67px 0 -1px,
        rgba(255,255,255,0.1) 34px -127px,
        #fff -26px -103px 0 -1px;
    }
}

4、月亮的样式

.starry::after{
    content: '';
    width: 100px;
    height: 100px;
    position: absolute;
    top: -106px;
    border-radius: 50%;
    box-shadow: #fff -25px 0;
    animation: starry 5s ease-in-out infinite;
    transform: rotate(-5deg);
    transform-origin: 0 50%;
}

@keyframes starry{
    50%{
        transform: rotate(10deg);
    }
}

搞定，按照实现步骤来一遍，你也可以画出月亮图标咯~