/* map */
div.location { 300px; height: 200px; border: 1px #f45 solid; background: #000; margin: 10px auto 0; }
div.location-indicator { position: relative; content: ""; display: block; margin: 20px auto 5px; 30px; height: 30px; box-shadow: 0 0 0 2px #fff; border-radius: 50% 50% 0 50%; -webkit-transform: rotate(45deg); -webkit-animation: mapping linear 3s infinite; }
div.yinying { 50px; height: 10px; margin: 0 auto; border-radius: 100%; background: #fff; opacity: 0.4; }
@-webkit-keyframes mapping { 0% {top: 0px;} 50% {top: -10px;} 100% {top: 0px;} }
@keyframes mapping { 0% {top: 0px;} 50% {top: -10px;} 100% {top: 0px;} }
<!-- map -->
<div class="location">
<div class="location-indicator">
</div>
<div class="yinying"></div>
</div>
********