52 lines
1.1 KiB
CSS
52 lines
1.1 KiB
CSS
#code-blast-canvas {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* 确保编辑器在震动时不会影响布局 */
|
|
.cm-editor {
|
|
transition: transform 0.1s ease-out;
|
|
}
|
|
|
|
/* 打字机效果的粒子样式 */
|
|
.code-blast-particle {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
border-radius: 50%;
|
|
animation: particle-fade 2s ease-out forwards;
|
|
}
|
|
|
|
@keyframes particle-fade {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
|
|
/* 震动效果的缓动 */
|
|
.code-blast-shake {
|
|
animation: shake 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
10% { transform: translate(-2px, -1px); }
|
|
20% { transform: translate(2px, 1px); }
|
|
30% { transform: translate(-1px, 2px); }
|
|
40% { transform: translate(1px, -2px); }
|
|
50% { transform: translate(-2px, 1px); }
|
|
60% { transform: translate(2px, -1px); }
|
|
70% { transform: translate(-1px, -2px); }
|
|
80% { transform: translate(1px, 2px); }
|
|
90% { transform: translate(-2px, -1px); }
|
|
} |