[주의!] 문서의 이전 버전(에 수정)을 보고 있습니다. 최신 버전으로 이동
/* 🚨 경고: 눈이 많이 피로할 수 있습니다 */
.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;
}
}