raffian raffian - 4 months ago 35
Javascript Question

How to create glowing effect with HTML 5

Looking for help implementing that little blue dot as seen on Stacks new Documentation site, it's perfect for animating a dashboard I'm building that shows service health/metrics. I grabbed html/css using Chrome's inspector, but I'm terrible at this stuff, I can't even get a dot, much less a blue one that glows ;-D

https://jsfiddle.net/raffinyc/3trup2c1/

.help-bubble:after {
content: "";
background-color: #3af;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
display: block;
top: 1px;
left: 1px;
}
<span class="help-bubble-outer-dot">
<span class="help-bubble-inner-dot"></span>
</span>


enter image description here

Answer

Here's the full reproduction. The animation makes liberal use of pseudoelements. The CSS:

.help-bubble .help-bubble-outer-dot {
    margin: 1px;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0,149,255,0.4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: help-bubble-pulse 1.5s linear infinite;
}

.help-bubble {
  display: block;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  left: 40px;
  top: 40px;
}

.help-bubble::after {
    content: "";
    background-color: #3af;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 1px;
    left: 1px;
}

.help-bubble .help-bubble-inner-dot {
    background-position: absolute;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0,149,255,0.4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    -webkit-animation: help-bubble-pulse 1.5s linear infinite;
    -moz-animation: help-bubble-pulse 1.5s linear infinite;
    -o-animation: help-bubble-pulse 1.5s linear infinite;
    animation: help-bubble-pulse 1.5s linear infinite;
}

.help-bubble .help-bubble-inner-dot:after {
    content: "";
    background-position: absolute;
    display: block;
    text-align: center;
    opacity: 1;
    background-color: rgba(0,149,255,0.4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    -webkit-animation: help-bubble-pulse 1.5s linear infinite;
    -moz-animation: help-bubble-pulse 1.5s linear infinite;
    -o-animation: help-bubble-pulse 1.5s linear infinite;
    animation: help-bubble-pulse 1.5s linear infinite;
}

@keyframes help-bubble-pulse{
  0% {
    transform: scale(1);
    opacity: .75;
  }
  25% {
    transform:scale(1);
    opacity:.75;
  }
  100% {
    transform:scale(2.5);
    opacity:0
  }
}

For the record, I'm not very well versed in code intellectual property but it's unlikely you have the rights to use this exactly without somehow making it your own.