•  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
더 보기

스니펫:asdf1024.css(비교)

r6 vs r7
1
span#test {
1
/* 🚨 경고: 눈이 많이 피로할 수 있습니다 */
2
.danger {
3
/* span이나 inline 요소일 경우를 대비해 block 계열로 변경 */
24
display: inline-block;
3
-webkit-animation: rotate-anim 2s linear infinite;
4
animation: rotate-anim 2s linear infinite;
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;
514
}
6
@-webkit-keyframes rotate-anim {
7
0% { -webkit-transform: rotate(0deg); }
8
100% { -webkit-transform: rotate(360deg); }
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
}
936
}
10
@keyframes rotate-anim {
37
38
/* 🎨 2. 보색 관계의 형광색들로 눈이 멀 것 같이 깜빡이는 효과 (그라데이션 불빛 포함) */
39
@keyframes color-madness {
1140
0% {
12
transform: rotate(0deg);
41
color: #ff0055;
42
text-shadow: 0 0 10px #ff0055, 0 0 20px #ff0055, 0 0 40px #ff0055;
1343
}
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
}
1456
100% {
15
transform: rotate(360deg);
57
color: #00ff00;
58
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00;
1659
}
1760
}
1861