misc: 내 도시 위치를 '신경쓰이게' 표시

hwe/css/map.css

@@ -96,6 +96,7 @@
     border: 0.02em gray solid;
     white-space: nowrap;
 }
+
 .world_map .city_name {
     background-color: rgb(30, 164, 255);
     z-index: 6;
@@ -103,6 +104,7 @@
     height: 15px;
 
 }
+
 .world_map .nation_name {
     background-color: rgb(30, 164, 255);
     z-index: 6;
@@ -117,9 +119,62 @@
     height: 12px;
 }
 
-.world_map.map_detail .my_city{
-    border:solid 1px red;
-    outline:dotted 4px red;
+.world_map.map_detail .my_city:before {
+    content: "";
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    position: absolute;
+
+    animation-duration: 3.9s;
+    animation-name: blink-my-city-d1;
+    animation-iteration-count: infinite;
+}
+
+
+.world_map.map_detail .my_city:after {
+    content: "";
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    position: absolute;
+
+    animation-duration: 3.9s;
+    animation-name: blink-my-city-d2;
+    animation-iteration-count: infinite;
+}
+
+
+@keyframes blink-my-city-d1 {
+    0% {
+        outline: dashed 3px transparent;
+    }
+
+    50% {
+        outline: dashed 3px rgba(255, 255, 255, 0.5);
+    }
+
+    100% {
+
+        outline: dashed 3px transparent;
+    }
+}
+
+@keyframes blink-my-city-d2 {
+    0% {
+        outline: dashed 2px transparent;
+    }
+
+    50% {
+        outline: dashed 2px red;
+    }
+
+    100% {
+
+        outline: dashed 2px transparent;
+    }
 }
 
 
@@ -319,7 +374,8 @@
 
 .map_detail .city_base .city_state {
     position: absolute;
-    top:5px; /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
+    top: 5px;
+    /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
     left: 0;
 }
 
@@ -400,10 +456,72 @@
     background: transparent;
 }
 
+/*
 .world_map.map_basic .my_city {
-    outline:dotted 4px red;
+
+}*/
+
+
+.world_map.map_basic .my_city:before {
+    content: "";
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    position: absolute;
+
+    animation-duration: 2s;
+    animation-name: blink-my-city;
+    animation-iteration-count: infinite;
 }
 
+
+.world_map.map_basic .my_city:after {
+    content: "";
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    position: absolute;
+
+    animation-duration: 2s;
+    animation-name: blink-my-city2;
+    animation-iteration-count: infinite;
+}
+
+
+@keyframes blink-my-city {
+    0% {
+        outline: dashed 5px transparent;
+    }
+
+    50% {
+        outline: dashed 5px white;
+    }
+
+    100% {
+
+        outline: dashed 5px transparent;
+    }
+}
+
+@keyframes blink-my-city2 {
+    0% {
+        outline: dashed 4px transparent;
+    }
+
+    50% {
+        outline: dashed 4px red;
+    }
+
+    100% {
+
+        outline: dashed 4px transparent;
+    }
+}
+
+
+
 .map_basic .city_base .city_img {
     background-color: white;
 }