css3 animation之positon
/* map */
div.location { width: 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; width: 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 { width: 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>
********
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
