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

搞定，按照實現步驟來一遍，你也可以畫出月亮圖標咯~