css3 彗星尾巴 |如何用css获取宽度

.star {
position: absolute;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 0px 20px #fff;
width: 10px;
height: 10px;
transform: rotate(45deg);
animation: star-fall 4s ease-in-out infinite;
}
@keyframes star-fall {
0% {
top: -200px;
left: 50%;
transform: rotate(45deg);
opacity: 1;
box-shadow: 0px 0px 20px #fff;
}
25% {
top: 0;
left: 55%;
transform: rotate(60deg);
opacity: 1;
box-shadow: 0px 0px 20px #fff;
}
50% {
top: 200px;
left: 60%;
transform: rotate(45deg);
opacity: 0.7;
box-shadow: 0px 0px 20px #fff;
}
75% {
top: 400px;
left: 65%;
transform: rotate(30deg);
opacity: 0.4;
box-shadow: 0px 0px 20px #fff;
}
100% {
top: 600px;
left: 70%;
transform: rotate(45deg);
opacity: 0;
box-shadow: 0px 0px 20px #fff;
}
}

使用CSS3 彗星尾巴可以让页面更加生动，吸引用户的注意力，增强用户体验。要制作彗星尾巴效果，只需要简单地使用CSS的动画效果，无需使用复杂的JS代码。