r7
| 1 | /* 🚨 경고: 눈이 많이 피로할 수 있습니다 */ |
|---|
| 2 | .danger { |
|---|
| 3 | /* span이나 inline 요소일 경우를 대비해 block 계열로 변경 */ |
|---|
r5
| 4 | display: inline-block; |
|---|
r7
| 5 | |
|---|
| 6 | /* 1. 크기, 위치, 회전 모두를 사방으로 비트는 애니메이션 (0.2초만에 초고속 반복) */ |
|---|
| 7 | animation: dynamic-chaos 0.2s linear infinite, |
|---|
| 8 | color-madness 0.3s steps(1) infinite; |
|---|
| 9 | |
|---|
| 10 | /* 텍스트 크기를 키워 효과를 극대화 */ |
|---|
| 11 | font-size: 2rem; |
|---|
| 12 | font-weight: 900; |
|---|
| 13 | text-transform: uppercase; |
|---|
r6
| 14 | } |
|---|
r7
| 15 | |
|---|
| 16 | /* 🔄 1. 위치, 회전, 크기를 엉망진창으로 흔드는 키프레임 */ |
|---|
| 17 | @keyframes dynamic-chaos { |
|---|
| 18 | 0% { |
|---|
| 19 | transform: translate(0, 0) rotate(0deg) scale(1); |
|---|
| 20 | } |
|---|
| 21 | 20% { |
|---|
| 22 | transform: translate(-8px, 5px) rotate(-15deg) scale(1.3); |
|---|
| 23 | } |
|---|
| 24 | 40% { |
|---|
| 25 | transform: translate(7px, -6px) rotate(25deg) scale(0.7); |
|---|
| 26 | } |
|---|
| 27 | 60% { |
|---|
| 28 | transform: translate(-5px, -5px) rotate(-35deg) scale(1.5); |
|---|
| 29 | } |
|---|
| 30 | 80% { |
|---|
| 31 | transform: translate(6px, 8px) rotate(45deg) scale(0.6); |
|---|
| 32 | } |
|---|
| 33 | 100% { |
|---|
| 34 | transform: translate(0, 0) rotate(360deg) scale(1); |
|---|
| 35 | } |
|---|
r1
| 36 | } |
|---|
r7
| 37 | |
|---|
| 38 | /* 🎨 2. 보색 관계의 형광색들로 눈이 멀 것 같이 깜빡이는 효과 (그라데이션 불빛 포함) */ |
|---|
| 39 | @keyframes color-madness { |
|---|
r5
| 40 | 0% { |
|---|
r7
| 41 | color: #ff0055; |
|---|
| 42 | text-shadow: 0 0 10px #ff0055, 0 0 20px #ff0055, 0 0 40px #ff0055; |
|---|
r5
| 43 | } |
|---|
r7
| 44 | 25% { |
|---|
| 45 | color: #00ffcc; |
|---|
| 46 | text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 40px #00ffcc; |
|---|
| 47 | } |
|---|
| 48 | 50% { |
|---|
| 49 | color: #ffff00; |
|---|
| 50 | text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00, 0 0 40px #ffff00; |
|---|
| 51 | } |
|---|
| 52 | 75% { |
|---|
| 53 | color: #ff00ff; |
|---|
| 54 | text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff; |
|---|
| 55 | } |
|---|
r5
| 56 | 100% { |
|---|
r7
| 57 | color: #00ff00; |
|---|
| 58 | text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00; |
|---|
r5
| 59 | } |
|---|
| 60 | } |
|---|
| 61 | |
|---|