스니펫:asdf1024.css(r7 RAW)

/* 🚨 경고: 눈이 많이 피로할 수 있습니다 */
.danger {
  /* span이나 inline 요소일 경우를 대비해 block 계열로 변경 */
  display: inline-block;
  
  /* 1. 크기, 위치, 회전 모두를 사방으로 비트는 애니메이션 (0.2초만에 초고속 반복) */
  animation: dynamic-chaos 0.2s linear infinite,
            color-madness 0.3s steps(1) infinite;
            
  /* 텍스트 크기를 키워 효과를 극대화 */
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* 🔄 1. 위치, 회전, 크기를 엉망진창으로 흔드는 키프레임 */
@keyframes dynamic-chaos {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(-8px, 5px) rotate(-15deg) scale(1.3);
  }
  40% {
    transform: translate(7px, -6px) rotate(25deg) scale(0.7);
  }
  60% {
    transform: translate(-5px, -5px) rotate(-35deg) scale(1.5);
  }
  80% {
    transform: translate(6px, 8px) rotate(45deg) scale(0.6);
  }
  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

/* 🎨 2. 보색 관계의 형광색들로 눈이 멀 것 같이 깜빡이는 효과 (그라데이션 불빛 포함) */
@keyframes color-madness {
  0% {
    color: #ff0055;
    text-shadow: 0 0 10px #ff0055, 0 0 20px #ff0055, 0 0 40px #ff0055;
  }
  25% {
    color: #00ffcc;
    text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 40px #00ffcc;
  }
  50% {
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 40px #ffff00;
  }
  75% {
    color: #ff00ff;
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff;
  }
  100% {
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00;
  }
}