月到中秋分外明，“流星赶月”绘星月良辰

前端

2023-10-08 20:05:58

明天就是中秋节了，这一天，我国人民会与家人团圆，赏月、吃月饼，共度佳节。用CSS画个月亮送给掘友们吧。但是就画一个月亮也太简单了些，于是便加了一些星星点缀以及流星坠落的效果。现在我们就用纯CSS为大家实现一个“流星赶月”的效果。

一、原理分析

这个效果的实现原理是利用CSS的keyframes属性，创建流星的动画效果。流星的动画包括两个部分，第一部分是流星从天而降，第二部分是流星划破长空，留下尾迹。

二、实现步骤

首先，我们先准备一张月亮的图片。
然后，我们创建一个流星的容器，然后在里面添加一个流星的元素。
接下来的工作就是给流星添加动画效果。
最后，我们把月亮的图片和流星的容器组合起来，这样就完成了我们的“流星赶月”效果。

三、效果展示

#moon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #ffff00;
}

#stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #ffffff;
    animation: twinkle 1s infinite alternate;
}

@keyframes twinkle {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

#meteor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.meteor {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff0000;
    animation: meteor 2s infinite;
}

@keyframes meteor {
    0% {
        top: 100%;
        left: 50%;
        opacity: 0;
    }

    50% {
        top: 50%;
        left: 50%;
        opacity: 1;
    }

    100% {
        top: -100%;
        left: 50%;
        opacity: 0;
    }
}