Files
voidraft/frontend/src/views/editor/extensions/codeblast/styles.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); }
}