Skip to content

Instantly share code, notes, and snippets.

@dantz
Created October 5, 2012 10:11
Show Gist options
  • Select an option

  • Save dantz/3839054 to your computer and use it in GitHub Desktop.

Select an option

Save dantz/3839054 to your computer and use it in GitHub Desktop.
Untitled
body {
padding: 100px;
}
.hotspot {
display: block;
width: 73px;
height: 73px;
position: absolute;
margin-left: -31px;
margin-top: -31px;
}
.hotspot div {
border-radius: 50%;
border: 6px solid #ccc;
width: 51px;
height: 51px;
animation-duration: 1s;
animation-name: pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.hotspot span {
position: absolute;
border-radius: 50%;
background-color: #666;
width: 13px;
height: 13px;
display: block;
top: 25px;
left: 25px;
}
@keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(0.6);
}
}
<!-- content to be placed inside <body>…</body> -->
<a href="" class="hotspot">
<div></div>
<span></span>
</a>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment