Special html item - Pin

With this tutorial you can put an animated pin into your slider.

Base code

Drop down a HTML layer, and put this code to the HTML field:

<div class="pin">
    <div class="circle"></div>
    <div class="innercircle"></div>
    <div class="aura"></div>  
</div>

and these codes to the CSS field:

.pin{
  margin: 20px;
  height: 20px;
}
.circle {
  background: none repeat scroll 0 0 #9f449b;
  border-radius: 99px 99px 99px 99px;
  height: 24px;
  position: absolute;
  width: 24px;
  opacity: .2;
}
.innercircle {
  background: #7b3678;
  border-radius: 99px 99px 99px 99px;
  margin: 3px;
  height: 18px;
  position: absolute;
  width: 18px;
  opacity: .5;
}
.aura {
  border-radius:99px;
  background:#9f449b;
  position:absolute;
  width:24px;
  height:24px;
  opacity:.4;
  -webkit-animation:glow 1s ease-out infinite;
  animation:glow 1s ease-out infinite;
  -webkit-transform:scale3d(1,1,1);
  -moz-transform:scale3d(1,1,1);
  -ms-transform:scale3d(1,1,1);
  -o-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1)
}
@-webkit-keyframes glow{
  0%,20%{
    opacity:.6;-webkit-transform:scale3d(1,1,1);
    -moz-transform:scale3d(1,1,1);
    -ms-transform:scale3d(1,1,1);
    -o-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1);
  }
  100%{
    opacity:0;
    -webkit-transform:scale3d(2,2,1);
    -moz-transform:scale3d(2,2,1);
    -ms-transform:scale3d(2,2,1);
    -o-transform:scale3d(2,2,1);
    transform:scale3d(2,2,1)
  }
}
@keyframes glow{
  0%,20%{
    opacity:.6;
    -webkit-transform:scale3d(1,1,1);
    -moz-transform:scale3d(1,1,1);
    -ms-transform:scale3d(1,1,1);
    -o-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1);
  }
  100%{
    opacity:0;
    -webkit-transform:scale3d(2,2,1);
    -moz-transform:scale3d(2,2,1);
    -ms-transform:scale3d(2,2,1);
    -o-transform:scale3d(2,2,1);
    transform:scale3d(2,2,1);
  }
}

How to change the color?

The pin's default color is purple, but you can change it as you'd like to.

You can find the base colors at the circle, innercircle and aura rules in the css code:

.circle {
  background: none repeat scroll 0 0 #9f449b;
}
.innercircle {
  background: #7b3678;
}
.aura {
  background:#9f449b;
}
You can replace these codes like this:
.circle {
  background: none repeat scroll 0 0 #4fe213;
  border-radius: 99px 99px 99px 99px;
  height: 24px;
  position: absolute;
  width: 24px;
  opacity: .2;
}
.innercircle {
  background: #4fe255;
  border-radius: 99px 99px 99px 99px;
  margin: 3px;
  height: 18px;
  position: absolute;
  width: 18px;
  opacity: .5;
}
.aura {
  border-radius:99px;
  background:#4fe213;
  position:absolute;
  width:24px;
  height:24px;
  opacity:.4;
  -webkit-animation:glow 1s ease-out infinite;
  animation:glow 1s ease-out infinite;
  -webkit-transform:scale3d(1,1,1);
  -moz-transform:scale3d(1,1,1);
  -ms-transform:scale3d(1,1,1);
  -o-transform:scale3d(1,1,1);
  transform:scale3d(1,1,1)
}

to create a green pin.