css实现地图定位铆钉动画效果代码-html代码-BFW代码库

css实现地图定位铆钉动画效果代码

代码语言：html

代码描述：css实现地图定位铆钉动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        body,
        html {
          height: 100%;
        }
        body {
          background: #2f2f2f;
        }
        .pin {
          width: 30px;
          height: 30px;
          border-radius: 50% 50% 50% 0;
          background: #89849b;
          position: absolute;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
          left: 50%;
          top: 50%;
          margin: -20px 0 0 -20px;
          -webkit-animation-name: bounce;
          -moz-animation-name: bounce;
          -o-animation-name: bounce;
          -ms-animation-name: bounce;
          animation-name: bounce;
          -webkit-animation-fill-mode: both;
          -moz-animation-fill-mode: both;
          -o-animation-fill-mode: both;
          -ms-animation-fill-mode: both;
          animation-fill-mode: both;
          -webkit-animation-duration: 1s;
          -moz-animation-duration: 1s;
          -o-animation-duration: 1s;
          -ms-animation-duration: 1s;
          animation-duration: 1s;
        }
        .pin:after {
          content: '';
          width: 14px;
          height: 14px;
          margin: 8px 0 0 8px;
          background: #2f2f2f;
          position: absolute;
          border-radius: 50%;
        }
        .pulse {
          background: rgba(0,0,0,0.2);
          border-radius: 50%;
          height: 14px;
          width: 14px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin: 11px 0px 0px -12px;
          -webkit-transform: rotateX(55deg);
          -moz-transform: rotateX(55deg);
          -o-transform: rotateX(55deg);
          -ms-transform: rotateX(55deg);
          transform: rotateX(55deg);
          z-index: -2;
        }
        .pulse:after {
          content: "";
          border-radius: 50%;
          height: 40px;
          width: 40px;
          position: absolute;
          margin: -13px 0 0 -13px;
          -webkit-animation: pulsate 1s ease-out;
          -moz-animation: pulsate 1s ease-out;
.........完整代码请登录后点击上方下载按钮下载查看