#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); } }