/* Easter Egg Effects */
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes broken-glass {
0% { transform: scale(1); filter: none; }
5% { transform: scale(1.02); } /* Impact shock */
100% { transform: scale(1); filter: sepia(0.2) blur(0.5px); }
}
@keyframes stone-throw {
0% {
transform: translate3d(60vw, -60vh, 1000px) rotate(0deg) scale(0.5);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translate3d(0, 0, 0) rotate(720deg) scale(1);
opacity: 1;
}
}
.easter-egg-stone {
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
z-index: 100000;
font-size: 80px;
line-height: 100px;
text-align: center;
pointer-events: none;
animation: stone-throw 0.6s ease-in forwards;
filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.5));
}
.easter-egg--shake .site-wrapper,
.easter-egg--shake .group-chat,
.easter-egg--shake .group-chat__trigger {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
.easter-egg--broken {
position: relative;
overflow-x: hidden;
}
.easter-egg--broken .site-wrapper,
.easter-egg--broken .group-chat,
.easter-egg--broken .group-chat__trigger {
/* 保持轻微的模糊和变色,模拟透过脏/碎玻璃看 */
filter: sepia(0.1) contrast(1.1);
transition: filter 0.2s;
}
.easter-egg--broken::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
pointer-events: none;
/* 玻璃裂纹 SVG */
background-image:
radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 25%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='0.3' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg stroke='rgba(255, 255, 255, 0.7)' stroke-width='0.4' stroke-linecap='round' filter='url(%23glow)'%3E%3Cpath d='M50 50 L10 5'/%3E%3Cpath d='M50 50 L90 10'/%3E%3Cpath d='M50 50 L95 60'/%3E%3Cpath d='M50 50 L60 95'/%3E%3Cpath d='M50 50 L15 85'/%3E%3Cpath d='M50 50 L5 40'/%3E%3Cpath d='M30 25 L40 15'/%3E%3Cpath d='M70 20 L80 35'/%3E%3Cpath d='M65 85 L80 75'/%3E%3Cpath d='M20 60 L30 75'/%3E%3Cpath d='M40 40 L60 30' stroke-opacity='0.5'/%3E%3Cpath d='M45 55 L35 65' stroke-opacity='0.5'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='15' fill='url(%23center-crack)' opacity='0.3'/%3E%3Cdefs%3E%3CradialGradient id='center-crack'%3E%3Cstop offset='0%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='transparent'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
background-size: cover;
background-position: center;
/* 混合模式让裂纹更自然地叠加 */
mix-blend-mode: screen;
}
.easter-egg--broken::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
/* 边缘暗角,增加氛围 */
box-shadow: inset 0 0 150px rgba(0,0,0,0.4);
z-index: 99998;
pointer-events: none;
/* 整体轻微模糊,模拟玻璃介质 */
backdrop-filter: blur(0.5px);
}
评论加载中...