有趣的星星运动

纯CSS三步实现LED的星球

三步实现LED灯球效果，灵感来源于Yusuke Nakaya

第一步：生成五角星

如果用css生成五角星，可以用border画出三个三角形叠加，代码量不算特别繁琐，这里就不赘述了。

另外，我们还可以在这里，利用工具clip-path裁剪出来，直接复制裁剪路径即可。

第二步：星星运动解析

类似于行星围绕着地球旋转，可以分为两步

1. 星星的对角运动 借助translate 的rotate和translate，实现星星沿着对角运动。

• transform:rotate(45deg) translate(-300px).rotate在前，容器的坐标系旋转，容器沿着旋转后的坐标系平移。
• transform:translate(-300px) rotate(45deg).translate在前，容器先平移，再进行旋转。

这里我们选择先旋转再平移，效果如下：

2. 星星的环绕效果 巧用scale，配合translate，实现星星的环绕。

• transform:scale(0.5) translate(300px).scale在前，实际位移=设定的位移*scale的缩放倍数。以容器的中心点来算，容器位移了150px。
• transform:translate(300px) scale(2). translate在前，以容器的中心点来算，容器位移了300px。

星星的环绕，我们想象卫星的环绕，大概是从0->向左到某个值->0->向右到某个值->0，动态配置scale和translate的积，就会形成环绕的运动

第三步：生成多个星星

借助pug语法，生成多个星星；

// html
.sky
    - for(i=0;i<100;i++)
        .star

// css
.star{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: #fff;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: animate 6000ms linear infinite;

    @for $i from 1 through 200 {
        &:nth-child(#{$i}) {
            top: calc(50% - #{random(400) - 200px});
            left: calc(50% - #{random(400) - 200px});
            animation-delay: random(6000) * -1ms;
        }
    }
}

星星动起来了！