Monday, August 23rd, 2010
Pure Pulsing CSS Map Markers
Category: CSS
He has a cool demo (Chrome or Safari + Snow Leopard only) of the effect:
The pulsing effect, for example, is generated by a CSS3 Animation:
CSS:
-
-
@-webkit-keyframes ringpulser
-
{
-
0%
-
{
-
opacity: 1.0;
-
-webkit-transform: scale(0.2);
-
}
-
-
80%
-
{
-
opacity: 0.0;
-
-webkit-transform: scale(1.0);
-
}
-
-
100%
-
{
-
opacity: 0.0;
-
-webkit-transform: scale(0.2);
-
}
-
}
-
The map itself is rotated to a 3D angle using a CSS 3D Transform:
CSS:
-
-
#map
-
{
-
position: absolute;
-
top: -430px;
-
left: 50px;
-
background: url(planis-map.jpg) top left no-repeat;
-
width: 800px;
-
height: 548px;
-
-webkit-transform-style: preserve-3d;
-
-webkit-transform: rotateX(60deg) translate3d(0, 0, -500px);
-
opacity: 0.75;
-
}
-
While the pin, marker, and pinhead themselves are a combination of CSS 3D, CSS Transforms, CSS Gradients, and more:
CSS:
-
-
.marker
-
{
-
position: absolute;
-
width: 100px;
-
height: 100px;
-
-webkit-perspective: 600;
-
}
-
-
.pin
-
{
-
position: absolute;
-
top: 10%;
-
left: 52%;
-
border-left: 2px solid transparent;
-
border-right: 2px solid transparent;
-
border-top: 40px solid #666;
-
-webkit-transform: rotate(9deg);
-
width: 0;
-
height: 0;
-
}
-
-
.pinhead
-
{
-
position: absolute;
-
top: 8%;
-
left: 49%;
-
width: 15px;
-
height: 15px;
-
-webkit-border-radius: 15px;
-
background: #999 -webkit-gradient(
-
radial, 95% 40%, 5, 85% 40%, 10, from(rgba(0, 0, 0, 0.40)), to(rgba(0, 0, 0, 0))
-
)
-
Related Content:
5 rating from 1 votes
That’s really cool; this is the first time I’ve seen custom animations used with the @-webkit-keyframes rule. Very cool stuff, and a nice slick effect.
For those who are interested in keyframe custom animations in webkit, (but were scratching their heads at the odd syntax) there’s a good post on the Surfin Safari blog: http://webkit.org/blog-files/bounce.html
Wow, it’s like a modern <blink> tag! Awesome!
As cool as this is, I honestly don’t feel it is the role of CSS do do animations like this. Maybe just the purist in me… I must be getting old.. as a JS advocate, it just feels wrong and dirty somehow… get off my lawn.