<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/andreasstorm/pen/ClguF?depth=everything&limit=all&order=popularity&page=13&q=image&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">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;
-o-animation: pulsate 1s ease-out;
-ms-animation: pulsate 1s ease-out;
animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-box-shadow: 0 0 1px 2px #89849b;
box-shadow: 0 0 1px 2px #89849b;
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-o-animation-delay: 1.1s;
-ms-animation-delay: 1.1s;
animation-delay: 1.1s;
}
@-moz-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-o-transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
50% {
opacity: 1;
-ms-filter: none;
filter: none;
}
100% {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
}
@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-o-transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
50% {
opacity: 1;
-ms-filter: none;
filter: none;
}
100% {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
}
@-o-keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-o-transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
50% {
opacity: 1;
-ms-filter: none;
filter: none;
}
100% {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
}
@keyframes pulsate {
0% {
-webkit-transform: scale(0.1, 0.1);
-moz-transform: scale(0.1, 0.1);
-o-transform: scale(0.1, 0.1);
-ms-transform: scale(0.1, 0.1);
transform: scale(0.1, 0.1);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
50% {
opacity: 1;
-ms-filter: none;
filter: none;
}
100% {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
}
@-moz-keyframes bounce {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: translateY(-2000px) rotate(-45deg);
-moz-transform: translateY(-2000px) rotate(-45deg);
-o-transform: translateY(-2000px) rotate(-45deg);
-ms-transform: translateY(-2000px) rotate(-45deg);
transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: translateY(30px) rotate(-45deg);
-moz-transform: translateY(30px) rotate(-45deg);
-o-transform: translateY(30px) rotate(-45deg);
-ms-transform: translateY(30px) rotate(-45deg);
transform: translateY(30px) rotate(-45deg);
}
80% {
-webkit-transform: translateY(-10px) rotate(-45deg);
-moz-transform: translateY(-10px) rotate(-45deg);
-o-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
-o-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
}
@-webkit-keyframes bounce {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: translateY(-2000px) rotate(-45deg);
-moz-transform: translateY(-2000px) rotate(-45deg);
-o-transform: translateY(-2000px) rotate(-45deg);
-ms-transform: translateY(-2000px) rotate(-45deg);
transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: translateY(30px) rotate(-45deg);
-moz-transform: translateY(30px) rotate(-45deg);
-o-transform: translateY(30px) rotate(-45deg);
-ms-transform: translateY(30px) rotate(-45deg);
transform: translateY(30px) rotate(-45deg);
}
80% {
-webkit-transform: translateY(-10px) rotate(-45deg);
-moz-transform: translateY(-10px) rotate(-45deg);
-o-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
-o-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
}
@-o-keyframes bounce {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: translateY(-2000px) rotate(-45deg);
-moz-transform: translateY(-2000px) rotate(-45deg);
-o-transform: translateY(-2000px) rotate(-45deg);
-ms-transform: translateY(-2000px) rotate(-45deg);
transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: translateY(30px) rotate(-45deg);
-moz-transform: translateY(30px) rotate(-45deg);
-o-transform: translateY(30px) rotate(-45deg);
-ms-transform: translateY(30px) rotate(-45deg);
transform: translateY(30px) rotate(-45deg);
}
80% {
-webkit-transform: translateY(-10px) rotate(-45deg);
-moz-transform: translateY(-10px) rotate(-45deg);
-o-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
-o-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
}
@keyframes bounce {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-transform: translateY(-2000px) rotate(-45deg);
-moz-transform: translateY(-2000px) rotate(-45deg);
-o-transform: translateY(-2000px) rotate(-45deg);
-ms-transform: translateY(-2000px) rotate(-45deg);
transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
-ms-filter: none;
filter: none;
-webkit-transform: translateY(30px) rotate(-45deg);
-moz-transform: translateY(30px) rotate(-45deg);
-o-transform: translateY(30px) rotate(-45deg);
-ms-transform: translateY(30px) rotate(-45deg);
transform: translateY(30px) rotate(-45deg);
}
80% {
-webkit-transform: translateY(-10px) rotate(-45deg);
-moz-transform: translateY(-10px) rotate(-45deg);
-o-transform: translateY(-10px) rotate(-45deg);
-ms-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
100% {
-webkit-transform: translateY(0) rotate(-45deg);
-moz-transform: translateY(0) rotate(-45deg);
-o-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}
}
</style></head><body>
<div class='pin'></div>
<div class='pulse'></div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body></html>
