Skip to content

Instantly share code, notes, and snippets.

@tsvensen

tsvensen/gist:2829402

Forked from cvuletich/gist:2829385
Created May 29, 2012 16:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsvensen/2829402 to your computer and use it in GitHub Desktop.
Save tsvensen/2829402 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Ring Pulsers
Raw
gistfile1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ring Pulsers</title>
<style type="text/css" media="screen">
.marker {
left: 150px;
height: 100px;
position: absolute;
top: 150px;
width: 100px;
}
.ring_box {
background: #F2821E;
height: 10px;
margin: 40px;
position: relative;
width: 10px;
-webkit-border-radius: 20px;
-webkit-transform-style: preserve-3d;
}
.ring {
border: 4px solid #F2821E;
height: 40px;
left: -19px;
position: absolute;
top: -19px;
width: 40px;
-webkit-border-radius: 100px;
-webkit-box-shadow: 0 0 5px #F2821E;
-webkit-animation-name: ringpulser;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
}
@-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);
}
}
</style>
</head>
<body>
<div class="marker">
<div class="ring_box">
<div class="ring"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment