仅创建位置标记 pin css

Question

尝试仅使用HTML CSS 创建位置标记图钉

我想要的（仅限 Pin）：

我能够管理的 (fiddle) ：

body {
  background: #e6e6e6;
}

.pin {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  background: #CA091A;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -15px;
}

.pin-label {
  width: 16px;
  height: 13px;
  font-size: 10px;
  font-weight: bold;
  margin: 3px 0 0 2px;
  background: #fff;
  text-align: center;
  padding-top: 2px;
  position: absolute;
  border-radius: 50%;
  transform: rotate(45deg);
}

.bounce {
  animation-name: bounce;
  animation-fill-mode: both;
  animation-duration: 1s;
}

<div class='pin bounce'>
  <span class='pin-label'>RU</span>
</div>
<div class='pulse'></div>

问题：引脚指针不够长。

是否只能使用HTML CSS?。

Answer 1

这样试试，

Click Here

@import "nib"

body
html
  height 100%

body
  background #2F2F2F

.pin
  width 30px
  height 30px
  border-radius 50% 50% 50% 0
  background #89849b
  position absolute
  transform rotate(-45deg)
  left 50%
  top 50%
  margin -20px 0 0 -20px
  animation-name bounce
  animation-fill-mode both
  animation-duration 1s
  &: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
  transform rotateX(55deg)
  z-index -2
  &:after
    content ""
    border-radius 50%
    height 40px
    width 40px
    position absolute
    margin -13px 0 0 -13px
    animation pulsate 1s ease-out
    animation-iteration-count infinite
    opacity 0.0
    box-shadow 0 0 1px 2px #89849b
    animation-delay 1.1s

@keyframes pulsate
  0%
    transform scale(0.1, 0.1)
    opacity 0.0
  50%
    opacity 1.0
  100%
    transform scale(1.2, 1.2)
    opacity 0

@keyframes bounce
  0%
    opacity 0
    transform translateY(-2000px) rotate(-45deg)
  60%
    opacity 1
    transform translateY(30px) rotate(-45deg)
  80%
    transform translateY(-10px) rotate(-45deg)
  100%
    transform translateY(0) rotate(-45deg)

<div class='pin'></div>
<div class='pulse'></div>