pulsating dots - glow glowing

a column of pulsing dots using css keyframes animation

CSS

.dot-container {
    position: relative;
    height:50px;
    width:200px;
}
.dot {
    width: 15px;
    height: 15px;
    background-color: #62bd19;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 20px;
}
.dot-ring {
    border: 3px solid #62bd19;
    -webkit-border-radius: 30px;
    height: 25px;
    width: 25px;
    position: absolute;
    left: 15px;
    top: 15px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

HTML

<div class="dot-container">
    <div class="dot-ring"></div>
    <div class="dot"></div>
</div>
<div class="dot-container">
    <div class="dot-ring"></div>
    <div class="dot"></div>
</div>
<div class="dot-container">
    <div class="dot-ring"></div>
    <div class="dot"></div>
</div>
<div class="dot-container">
    <div class="dot-ring"></div>
    <div class="dot"></div>
</div>

Working Result

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 740 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
When i was a little kid, I was really scared of the dark. But then I came to understand, dark just means the absence of photons in the visible wavelength -- 400 to 700 nanometers. Then i thought, well, its really silly to be afraid of a lack of photons. Then i wasn't afraid of the dark anymore after that.
Elon Musk