css3制作星空动画 |css实现抛物线动画

.star-sky {
position: fixed; /* 设置为固定定位，可以让星空在页面中滚动 */
top: 0;
left: 0;
width: 100%;
height: 100%; /* 设置为全屏高度 */
background-color: #000; /* 设置背景颜色为黑色，可以更好地突出星星 */
z-index: -1; /* 将背景设置到最后一层 */
}
.star {
position: absolute; /* 设置为绝对定位，可以让星星自由移动 */
width: 2px;
height: 2px; /* 设置星星大小 */
background-color: #fff; /* 设置星星颜色为白色 */
border-radius: 50%; /* 将星星设置成圆形 */
animation: twinkle 1s infinite; /* 设置星星闪烁动画 */
}
@keyframes twinkle {
0% {
transform: scale(0); /* 星星开始时是看不见的，所以先将它缩小为0 */
opacity: 0; /* 同时将透明度设置为0 */
}
50% {
transform: scale(1); /* 星星变成原来的大小 */
opacity: 1; /* 同时将透明度设置为1，让星星变得可见 */
}
100% {
transform: scale(0); /* 星星又缩小为0，变成看不见的状态 */
opacity: 0;
}
}

使用以上代码可以实现一个漂亮的星空动画，只需要在HTML中添加一个类名为“star-sky”的元素即可。