效果演示
html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shooting Stars Animation</title>
<style>
body { background: radial-gradient(ellipse at bottom, #87CEFA 0%, #FFFFFF 100%); height: 100vh; overflow: hidden; display: flex; font-family: "Anton", sans-serif; justify-content: center; align-items: center; }
.night { position: relative; width: 100%; height: 100%; transform: rotateZ(45deg); }
.shooting_star { position: absolute; left: 50%; top: 50%; height: 2px; background: linear-gradient(-45deg, #FFD700, rgba(255, 255, 0, 0)); border-radius: 999px; filter: drop-shadow(0 0 6px #FFD700); animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite; }
.shooting_star::before, .shooting_star::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0; height: 2px; background: linear-gradient(-45deg, rgba(255, 255, 0, 0), #FFD700, rgba(255, 255, 0, 0)); transform: translateX(50%); border-radius: 100%; animation: shining 3000ms ease-in-out infinite; }
.shooting_star::before { transform: translateX(50%) rotateZ(45deg); }
.shooting_star::after { transform: translateX(50%) rotateZ(-45deg); }
.shooting_star:nth-child(1) { top: calc(50% - -124px); left: calc(50% - 144px); animation-delay: 1022ms; }
.shooting_star:nth-child(2) { top: calc(50% - 47px); left: calc(50% - 212px); animation-delay: 3898ms; }
.shooting_star:nth-child(3) { top: calc(50% - -132px); left: calc(50% - 127px); animation-delay: 1083ms; }
.shooting_star:nth-child(4) { top: calc(50% - -118px); left: calc(50% - 11px); animation-delay: 4106ms; }
.shooting_star:nth-child(5) { top: calc(50% - 168px); left: calc(50% - 83px); animation-delay: 262ms; }
.shooting_star:nth-child(6) { top: calc(50% - -39px); left: calc(50% - 19px); animation-delay: 9322ms; }
.shooting_star:nth-child(7) { top: calc(50% - 136px); left: calc(50% - 29px); animation-delay: 7812ms; }
.shooting_star:nth-child(8) { top: calc(50% - 43px); left: calc(50% - 185px); animation-delay: 5527ms; }
.shooting_star:nth-child(9) { top: calc(50% - 103px); left: calc(50% - 108px); animation-delay: 951ms; }
.shooting_star:nth-child(10) { top: calc(50% - 102px); left: calc(50% - 180px); animation-delay: 358ms; }
.shooting_star:nth-child(11) { top: calc(50% - 44px); left: calc(50% - 132px); animation-delay: 759ms; }
.shooting_star:nth-child(12) { top: calc(50% - -129px); left: calc(50% - 237px); animation-delay: 2251ms; }
.shooting_star:nth-child(13) { top: calc(50% - 98px); left: calc(50% - 70px); animation-delay: 9063ms; }
.shooting_star:nth-child(14) { top: calc(50% - -9px); left: calc(50% - 208px); animation-delay: 4446ms; }
.shooting_star:nth-child(15) { top: calc(50% - -108px); left: calc(50% - 257px); animation-delay: 6358ms; }
.shooting_star:nth-child(16) { top: calc(50% - 170px); left: calc(50% - 255px); animation-delay: 4057ms; }
.shooting_star:nth-child(17) { top: calc(50% - 12px); left: calc(50% - 22px); animation-delay: 1869ms; }
.shooting_star:nth-child(18) { top: calc(50% - 63px); left: calc(50% - 133px); animation-delay: 1703ms; }
.shooting_star:nth-child(19) { top: calc(50% - -12px); left: calc(50% - 249px); animation-delay: 4177ms; }
.shooting_star:nth-child(20) { top: calc(50% - 193px); left: calc(50% - 168px); animation-delay: 5977ms; }
@keyframes tail { 0% { width: 0; } 30% { width: 100px; } 100% { width: 0; } }
@keyframes shining { 0% { width: 0; } 50% { width: 30px; } 100% { width: 0; } }
@keyframes shooting { 0% { transform: translateX(0); } 100% { transform: translateX(300px); } }
</style>
</head>
<body>
<div class="night">
<div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div><div class="shooting_star"></div>
</div>
</body>
</html>
