Menu
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>
280
It is like a neon text. Because we can use CSS to get a glowing text effect. Firstly, you have to create your HTML file and save it as an “index.html ” or use any name as you wish. After that, you can build your code like below.
If you just replace my line-y geometry with your circle arcs, you'll be able to create that effect without image files. Show activity on this post. Are the circles image files? If so, create image files with glow applied to them within photoshop, GIMP, etc. Save them as .PNG to preserve the transparency of the background.
First we have to use the box-shadow property to create the glowing light effect, and then use animation together with keyframes to add the repeatedly glowing effect. We can also use box-shadow without keyframes animation to create glowing effect.
How To Create a Glowing Text Use the text-shadowproperty to create the neon light effect, and then use animationtogether with keyframesto add the repeatedly glowing effect: Example .glow { font-size: 80px; color: #fff; text-align: center; -webkit-animation: glow 1s ease-in-out infinite alternate;
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.
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
