一闪一闪亮晶晶
CSS
.star-ripple {
position: fixed;
width: 30px;
height: 30px;
animation: star-pop 0.8s ease-out;
pointer-events: none;
z-index: 9999;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* 大星星动画 */
@keyframes star-pop {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
50% { transform: translate(-50%, -50%) scale(1.2); }
100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}
/* 小星星动画 */
@keyframes mini-star {
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
100% { transform: translate(-50%, -50%) rotate(360deg) scale(1) translate(50px, 0); opacity: 0; }
}
/* 金色渐变效果 */
.main-star {
background: radial-gradient(circle at center,
#FFD700 20%,
#FFEC8B 50%,
rgba(255, 215, 0, 0.3) 80%);
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}
.mini-star {
width: 15px;
height: 15px;
background: linear-gradient(45deg,
#FFD700 30%,
#FFF380 70%);
animation: mini-star 0.6s ease-out;
}