Update index.html

index.html

@@ -87,41 +87,61 @@
         }
 
         #crosshair {
-            position: fixed;
-            top: 25%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 40px;
-            height: 40px;
-            border: 2px solid rgba(255,0,0,0.7);
-            border-radius: 50%;
-            z-index: 1001;
-            pointer-events: none;
-            mix-blend-mode: difference;
-        }
+        position: fixed;
+        top: 25%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 40px;
+        height: 40px;
+        border: 2px solid rgba(255,0,0,0.7);
+        border-radius: 50%;
+        z-index: 1001;
+        pointer-events: none;
+        mix-blend-mode: difference;
+        transition: all 0.2s ease; /* 부드러운 전환 효과 추가 */
+    }
+/* 조준 가능 상태의 크로스헤어 스타일 */
+#crosshair.target-locked {
+    border: 4px solid rgba(0,255,0,0.9);
+    box-shadow: 0 0 10px rgba(0,255,0,0.5);
+}
 
-        #crosshair::before,
-        #crosshair::after {
-            content: '';
-            position: absolute;
-            background: rgba(255,0,0,0.7);
-        }
+#crosshair::before,
+#crosshair::after {
+    content: '';
+    position: absolute;
+    background: rgba(255,0,0,0.7);
+    transition: all 0.2s ease;
+}
 
-        #crosshair::before {
-            top: 50%;
-            left: -10px;
-            right: -10px;
-            height: 2px;
-            transform: translateY(-50%);
-        }
+#crosshair.target-locked::before,
+#crosshair.target-locked::after {
+    background: rgba(0,255,0,0.9);
+}
 
-        #crosshair::after {
-            left: 50%;
-            top: -10px;
-            bottom: -10px;
-            width: 2px;
-            transform: translateX(-50%);
-        }
+#crosshair::before {
+    top: 50%;
+    left: -10px;
+    right: -10px;
+    height: 2px;
+    transform: translateY(-50%);
+}
+
+#crosshair::after {
+    left: 50%;
+    top: -10px;
+    bottom: -10px;
+    width: 2px;
+    transform: translateX(-50%);
+}
+
+#crosshair.target-locked::before {
+    height: 4px;
+}
+
+#crosshair.target-locked::after {
+    width: 4px;
+}
 
         #healthBar {
             position: absolute;