index.css•1.97 kB
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
@apply bg-gray-900 text-gray-100;
overflow-x: hidden;
}
}
@layer components {
/* カスタムスクロールバー */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
@apply bg-gray-800;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
@apply bg-gray-600 rounded-full;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
@apply bg-gray-500;
}
/* ダメージ数値アニメーション */
@keyframes damage-float {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
50% {
transform: translateY(-30px) scale(1.2);
}
100% {
transform: translateY(-60px) scale(0.8);
opacity: 0;
}
}
.damage-number {
animation: damage-float 2s ease-out forwards;
}
/* グロー効果 */
.glow-red {
box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}
.glow-green {
box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
}
.glow-blue {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}
/* タイピング効果 */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
.typing-effect {
overflow: hidden;
border-right: 2px solid white;
white-space: nowrap;
animation: typing 2s steps(40, end), blink 0.75s step-end infinite;
}
/* 脈動効果 */
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}
50% {
box-shadow: 0 0 30px rgba(239, 68, 68, 0.8);
}
}
.pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
}