raffian raffian - 1 year ago 124
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download