## 一、波紋效果  ~~~ <style> .zh-vehicle-marker{position: relative;width: 16px;height: 16px;margin: 300px 0 0 300px;border-radius: 50%;background-color: #44B5EA;} .zh-vehicle-marker:before, .zh-vehicle-marker:after{content: "";display: block;position: absolute;z-index: 2;left: 50%;top: 50%;border-radius: 50%;border: 1px solid #44B5EA;width: 100%;height: 100%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);box-sizing: border-box;-moz-box-sizing: border-box;} .zh-vehicle-marker:before{-webkit-animation: scaleStroke 1s ease infinite;-moz-animation: scaleStroke 1s ease infinite;animation: scaleStroke 1s ease infinite;} .zh-vehicle-marker:after{-webkit-animation: scaleStroke 1s ease 0.25s infinite;-moz-animation: scaleStroke 1s ease 0.25s infinite;animation: scaleStroke 1s ease 0.25s infinite;} @-webkit-keyframes scaleStroke { to {width: 40px;height: 40px;opacity: 0;} } @-moz-keyframes scaleStroke { to {width: 40px;height: 40px;opacity: 0;} } @keyframes scaleStroke { to {width: 40px;height: 40px;opacity: 0;} } </style> <div class="zh-vehicle-marker"></div> ~~~