A Pen by Joey Hiller.

index.html

<div class="wrapper">
  <h1>Infopoint Icons</h1>
  <h2>Fun animated icons to draw attention to areas of an image.</h2>
  <p>Click to see the icons on top of the image.</p>
  <div class="icons">
    <div class="box">
      <div class="plusDrop"></div>
    </div>
    
    <div class="box">
      <div class="circlePulse"></div>
    </div>
    
    <div class="box">
      <!--<div class="arrowDrop"></div>-->
    </div>
    
    <div class="box">
      <div class="scope">
        <div class="glass"></div>
      </div>
    </div>
    
    <div class="box">
      <div class="bounceDrop"></div>
    </div>
    
  </div>
  
</div>


<div class="demo">
  <div class="plusDrop"><div class="glass"></div></div>
  <div class="plusDrop" style="left: 34em; top: 16.5em;"><div class="glass"></div></div>
  <img src="https://dl.dropboxusercontent.com/u/127825508/SFGoogleMap.png" />
</div>

Infopoint-Icons.markdown

Infopoint Icons

Some fun animated icons to draw attention to areas of an image - or even a map! Some of these could also be used as loaders.

A Pen by Joey Hiller on CodePen.

License.

script.js

// To toggle the points on an image
$('.box').click(function() {
  var type = $(this).children('div').attr('class');
  $('.demo>div').removeClass().addClass(type);
});

// Just the Webfont Loader
WebFontConfig={google:{families:["Source+Sans+Pro::latin"]}},function(){var t=document.createElement("script")
t.src=("https:"==document.location.protocol?"https":"http")+"://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js",t.type="text/javascript",t.async="true"
var e=document.getElementsByTagName("script")[0]
e.parentNode.insertBefore(t,e)}()

style.scss

@import "compass";
$scale: 150%; //Scale the icons here
$color: #48658B; //changes document color

html {
  margin: 0;
  padding: 0;
  background-color: $color;
  color: lighten($color, 50);
  font-family: 'Source Sans Pro', sans-serif;
}
h1,h2,p {
  margin: 0;
  color: lighten($color, 50);
  text-align: center;
  font-weight: 200;
}
h1 {
  padding: 0.25em;
  font-size: 2.5em;
}
h2 {
  padding: 0.125em;
  font-size: 1.125em;
}
p {
  padding: 0.5em;
  font-size: 0.75rem;
}

::-moz-selection {
  background: rgba(lighten($color, 90), 0.5);
  text-shadow: none;
}
::selection {
  background: rgba(lighten($color, 90), 0.5);
  text-shadow: none;
}

.wrapper {
  margin: 0 auto;
  padding: 2em 0;
  max-width: 39rem;
  border: 1px solid lighten($color, 50);
  border-top: none;
  box-shadow: 0 0 1px 0 lighten($color, 30);
}
.icons {
  margin: 3rem 0 1rem 0;
}
.box {
  position: relative;
  display: inline-block;
  margin: 2.5em;
  padding: 1em;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid lighten($color, 30);
  background: lighten($color, 3);
  vertical-align: top;
  cursor: pointer;
  transition: background 0.3s ease, border 0.3s ease;
  &:hover {
    border: 1px solid lighten($color, 45);
    background: lighten($color, 6);
  }
  div {
    font-size: $scale;
    div {
      font-size: inherit;
    }
  }
}
.plusDrop {
  margin: 0 auto;
  width: 0;
  height: 0;
  border-radius: 100%;
  border-bottom-left-radius: 0;
  background-color: transparent;
  transform: rotate(-45deg) translate3d(0, 1em, 0);
  animation-name: wag;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  &:before {
    position: relative;
    top: -2em;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    width: 2em;
    height: 2em;
    border: 0.2em solid lighten($color, 90);
    border-radius: 100%;
    border-bottom-left-radius: 0;
    content: "";
  }
  &:after {
    position: relative;
    display: block;
    width: 1em;
    height: 1em;
    color: lighten($color,90);
    content: '\00D7';
    font-size: 2.5em;
    opacity: 1;
    transition: all 0.2s ease;
    transform: translate3d(0.15em, -1.85em, 0);
    transform-origin: center;
  }
  &:hover, &:focus {
    animation-play-state: paused;
  }
  &:hover:before, &:focus:before {
    background: rgba(255,255,255,0.3);
  }
  &:hover:after, &:focus:after {
    opacity: 0;
  }
}

$wiggle: 9deg;
@keyframes wag
{
  from {transform: rotateZ(-45deg - $wiggle);}
  to   {transform: rotateZ(-45deg + $wiggle);};
}

.circlePulse {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 0;
  height: 0;
  &:before {
    position: relative;
    top: -0.8em;
    left: -1em;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    width: 2em;
    height: 2em;
    border: 0.5em solid lighten($color, 90);
    border-radius: 100%;
    content: "";
    transform-origin: center;
    animation-name: inOut;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  &:after {
    position: absolute;
    top: -0.8em;
    left: -1em;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    width: 2em;
    height: 2em;
    border: 0.2em solid lighten($color, 90);
    border-radius: 100%;
    content: "";
    transform-origin: center;
    animation-name: inOut;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: -0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
}

@keyframes inOut {
  from {transform: scale(0);}
  to   {transform: scale(1);};
}



.arrowDrop {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 0;
  height: 0;
  &:before {
    position: relative;
    display: block;
    top: -1.25em;
    left: -0.5em;
    width: 1em;
    height: 1em;
    color: white;
    text-align: center;
    content: "v";
    font-size: 1.5em;
    line-height: 1em;
    opacity: 1;
    transition: all 0.2s ease;
    animation-name: arrowOne;
    animation-duration: 2s;
    animation-delay: -2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    //animation-direction: alternate;
  }
  &:after {
    position: relative;
    top: -2.5em;
    left: -.75em;
    display: block;
    width: 1.5em;
    height: 1em;
    border-radius: 100%;
    background: rgba(lighten($color, 90), 0.5);
    content: "";
    animation-name: explode;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
}
@keyframes arrowOne {
  0%    {transform: translateY(-1em) scale(1.5);  opacity: 1;}
  50%   {transform: translateY(0);                opacity: 1;}
  58%   {transform: translateY(0) scale(1.3);     opacity: 0.5;}
  58.1% {transform: translateY(0) scale(1.3);     opacity: 0;}
  60%   {transform: translateY(-1em) scale(1);    opacity: 0;}
  100%  {transform: translateY(-1em);             opacity: 0;}
}
@keyframes explode
{
  0%   {transform: scale(0);    opacity: 0;}
  50%  {transform: scale(0.75); opacity: 1;}
  60%  {transform: scale(0.8);  opacity: 0.5;}
  90%  {transform: scale(2.75); opacity: 0;}
  100% {transform: scale(0);    opacity: 0;}
}









.bounceDrop {
  position: relative;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-radius: 100%;
  border-bottom-left-radius: 0;
  background-color: transparent;
  &:before {
    position: relative;
    top: -2.5em;
    left: -1em;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    width: 2em;
    height: 2em;
    border: 0.2em solid lighten($color, 90);
    border-radius: 100%;
    border-bottom-left-radius: 0;
    content: "";
    transform: rotate(-45deg) translate3d(0, 1em, 0);
    animation-name: bounce;
    animation-duration: 0.75s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  &:after { //oval
    position: relative;
    top: -2.5em;
    left: -.75em;
    display: block;
    width: 1.5em;
    height: 1em;
    border-radius: 100%;
    background: rgba(lighten($color, 90), 0.5);
    content: "";
    animation-name: bounceShadow;
    animation-duration: 0.75s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
}

@keyframes bounce
{
  0%   {transform: translateY(-0.25em) rotate(-45deg);}
  50%  {transform: translateY(-0.5em)  rotate(-45deg);}
  100% {transform: translateY(0)       rotate(-45deg);}
}
@keyframes bounceShadow
{
  0%   {opacity: 0.75; transform: scale(0.75);}
  50%  {opacity: 0.5;  transform: scale(0.5);}
  100% {opacity: 1;    transform: scale(0.8);}
}



.scope {
  position: relative;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-radius: 100%;
  border-bottom-left-radius: 0;
  background-color: transparent;
  font-size: $scale*(6/5) !important; //Lazy scale up
  .glass {
    height: 1em;
    width: 1em;
    top: -0.5em;
    left: -0.65em;
    border: 0.2em solid lighten($color, 90);
    border-radius: 100%;
    position: relative;
    animation-name: zoom;
    animation-duration: .75s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 0.5em 0.5em;
    &:before {
      height: 0.25em;
      width: 1em;
      top: 0.75em;
      left: 0.75em;
      transform: rotate(45deg);
      transform-origin: left bottom;
      content: "";
      background: lighten($color, 90);
      display: block;
      position: relative;
    }

    &:after {
      position: relative;
      display: block;
      top: -0.33em;
      left: -0.16em;
      width: 1em;
      height: 1em;
      color: white;
      text-align: center;
      content: "+";
      font-size: 1.5em;
      line-height: 1em;
      opacity: 1;
      transition: all 0.2s ease;
      animation-name: zoomPlus;
      animation-duration: .75s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    }
  }
}

@keyframes zoom
{
  0%   {transform: scale(0.9);}
  50%  {transform: scale(0.85);}
  100% {transform: scale(1);}
}
@keyframes zoomPlus
{
  0%   {transform: scale(0.9);}
  50%  {transform: scale(0.8);}
  100% {transform: scale(1.1);}
}







.demo {
  position: relative;
  margin: 2rem auto;
  padding: 0;
  max-width: 39rem;
  border: 1px solid lighten($color, 30);
  .plusDrop, .circlePulse, .bounceDrop, .scope, .arrowDrop {
    position: absolute;
    top: 9.3rem;
    left: 17.8rem;
    &:before {
      border-color: saturate($color, 20%);
      color: saturate($color, 20%);
    }
    &:after {
      border-color: saturate($color, 20%);
      color: saturate($color, 20%);
    }
    div {
      border-color: saturate($color, 20%);
      &:before {
        background: saturate($color, 20%);
      }
      &:after {
        color: saturate($color, 20%);
      }
    }
  }
  .bounceDrop {
    &:after {
      background: transparentize(saturate($color, 20%), 0.2);
    }
  }
  img {
    margin: 0;
    padding: 0;
    width: 39rem;
    vertical-align: top;
  }
}