<div class="icon">
<i></i>
</div>
@keyframes anim-glow {
0% {
box-shadow: 0 0 rgba(#61EF61, 1);
}
100% {
box-shadow: 0 0 10px 8px transparent;
border-width: 2px;
}
}
body {
padding: 40px;
background-color: #222;
}
.icon {
border-radius: 50%;
border: 2px solid #61EF61;
width: 10px;
height: 10px;
text-align: center;
position: relative;
animation: anim-glow 2s ease infinite;
i {
border-radius: 50%;
border: 2px solid #61EF61;
width: 2px;
height: 2px;
display: inline-block;
vertical-align: 6px;
background-color: #61EF61;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.