Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Beacon CSS - An example using CSS animations to create a beacon for use on something like a map or to call attention visually.
<!DOCTYPE HTML>
<html lang="en">
<head>
<style>
.dot {
background-color: red;
border-radius: 50%;
width: 20px;
height: 20px;
display: block;
z-index: 1;
position: absolute;
}
.dot::before {
background-color: red;
content: '';
top: calc(50% - 5px);
left: calc(50% - 5px);
width: 10px;
height: 10px;
opacity: 1;
border-radius: 50%;
position: absolute;
animation: burst-animation 1s infinite;
animation-fill-mode: forwards;
z-index: 0;
}
@keyframes burst-animation {
from { opacity: 1; transform:scale(1); }
to { opacity: 0; transform:scale(4); }
}
</style>
</head>
<body>
<span class="dot"></span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment