Add marker halo animation styles

This commit is contained in:
Eden Halperin 2013-11-12 11:12:28 -05:00
parent 1b19974b12
commit 721e32b5ce
2 changed files with 32 additions and 1 deletions

View file

@ -25,3 +25,34 @@ div.leaflet-marker-icon.location-filter.move-marker {
.site .leaflet-popup p {
margin: 0 0 20px 0;
}
img.leaflet-marker-icon:after {
content:'';
position:absolute; left:50%; top:50%;
margin:-30px 0 0 -30px;
width:59px;
height:59px;
display:block;
background:rgba(0,0,0,0.2);
border:2px solid rgba(0,0,0,0.6);
border-radius:50%;
opacity:0;
-webkit-animation:place-tmp 2000ms infinite;
-moz-animation:place-tmp 2000ms infinite;
animation:place-tmp 2000ms infinite;
@-webkit-keyframes place-tmp {
0% { opacity:1; -webkit-transform:scale(0); }
50% { opacity:0; -webkit-transform:scale(1); }
100% { opacity:0; -webkit-transform:scale(1); }
}
@-moz-keyframes place-tmp {
0% { opacity:1; -moz-transform:scale(0); }
50% { opacity:0; -moz-transform:scale(1); }
100% { opacity:0; -moz-transform:scale(1); }
}
@keyframes place-tmp {
0% { opacity:1; transform:scale(0); }
50% { opacity:0; transform:scale(1); }
100% { opacity:0; transform:scale(1); }
}
}

View file

@ -6,7 +6,7 @@
</h2>
<div class="note browse-section">
<p><%= t('javascripts.notes.new.intro') %></p>
<h4><%= t('javascripts.notes.new.intro') %></h4>
<form action="#">
<input type="hidden" name="lon">
<input type="hidden" name="lat">