<div class="city"> 
<ul id="listCity" >
        <li class="activeLi" >Киев</li>
        <li class="activeLi" >Днепр</li>
        <li class="activeLi" > Одесса</li>
        <li class="activeLi" > Харьков</li>
        <li class="activeLi" > Кривой Рог</li>
        <li class="activeLi" > Черновцы</li>
    </ul>
 <div class="X" onclick="clos();">
   <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<circle style="fill:#D75A4A;" cx="25" cy="25" r="25"/>
<polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" points="16,34 25,25 34,16 
	"/>
<polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" points="16,16 25,25 34,34 
	"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg></div> 
 
</div>

<div class="circleStatic" onmouseover="Taxi();">
  <div class="shadow"></div>       
  <div class="circle">
</div>
  <div class="line1">
  <div class="b" >
  </div><div class="a" >
  </div><div class="b" >
  </div><div class="a" >
  </div><div class="b" >
  </div>
</div><div class="line2">
  <div class="a" >
  </div><div class="b" >
  </div><div class="a" >
  </div><div class="b" >
  </div><div class="a" >
  </div>
</div>
  <div class="circleBig">
</div>
</div>

$top: 200px;
$left: 200px;
$size: 50px;
$color: #feb000;
$height: 230px;


.city{
    position: fixed;
  top: calc(50% - 100px);
  left: 200px;
  z-index: 0;
font-size: 0;
  
}

.X {
  display: inline-block;
  vertical-align: top;
  user-select: none;
  cursor: pointer;

}
#listCity {
  display: inline-block;
  list-style-type: none;
  padding-left: 10px; 
  padding-right: 10px;
  margin: 0;
  border-radius: 5px;
  box-shadow:  -20px 20px 30px rgba(0,0,0,0.5);
}
.circle {
   height: 0;
   width: 0;
   padding: $size;
   border-radius: $size;
   border: 2px solid $color;
   position: fixed;
   top: $top;
   left: $left;
   animation-name: increase;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
  z-index: 2;
  box-shadow: 0 0 10px $color;
}
.circleStatic {
   height: 0;
   width: 0;
   padding: $size;
   border-radius: $size;
   border: 2px solid $color;
   position: fixed;
   top: $top;
   left: $left;
   background: $color;
   z-index: 2;
  box-shadow:  0 0 30px rgba(0,0,0,0.5);
  
}
.shadow {
  height: 0;
   width: 0;
   padding: $size;
   border-radius: $size;
   border: 2px solid rgba(25, 21, 23, 0.1);
   position: fixed;
   top: $top;
   left: $left;
   z-index: 3;
   box-shadow: inset 0 0 30px rgba(20, 23, 13, 0.3);
}
.circleBig {
   visibility: hidden;
   height: 0;
   width: 0;
   padding: $size + 25px;
   border-radius: $size + 25px;
   border: 2px solid $color;
   position: fixed;
   top: $top - 25px;
   left: $left - 25px;
  z-index: 2;
  box-shadow: 0 0 10px $color;
}


.a {
  display: inline-block;
  background: #000;
    height: 15px;
  width: 15px;
}
.b {
  display: inline-block;
  height: 15px;
  width: 15px;
}
.line1 {
  position: fixed;
  top: $top + $size/2+10px;
  left: $left + $size/4;
}
.line2 {
  position: fixed;
  top: $top + $size/2+25px;
  left: $left + $size/4;
}
.circleStatic:hover {
  .circle {
    animation-name: big;
    animation-duration: 1s;
    animation-iteration-count: 1;
  }
  .circleBig {
    visibility: visible;
  }

@keyframes increase {
  from {
   padding: $size;
   border-radius: $size;
  }
  to {
   padding: $size + 25px;
   border-radius: $size + 25px;
   top: $top - 25px;
   left: $left - 25px;

    
  }
}


}
@keyframes big {
  from {
   padding: $size;
   border-radius: $size;

  }
  to {
   padding: $size + 25px;
   border-radius: $size + 25px;
   top: $top - 25px;
   left: $left - 25px;
    
  }
}

var i = 200;
var height = 0;
var fSize =0;
function Taxi() {
  if(i<=400) {
  i+=20;
  height+=15;
  fSize+=2;
  $(".city").css({'left': i +'px', 'font-size': fSize});
    $(".X").css("width", fSize+"px");
  $("#listCity").css({'height': height+'px', 'border':'1px solid lightgray'});
    setTimeout("Taxi()", 20);
  }
  
}

function clos() {
  i-=20;
  height-=15;
  fSize-=2;
  $(".city").css({'left': i +'px', 'font-size': fSize});
  $(".X").css("width", fSize+"px");
  $("#listCity").css({'height': height+'px', 'border':'0px solid lightgray'});
   if(i>=200) setTimeout("clos()", 20);
  
}