diff --git a/Glowing Dot Animation/image.jpg b/Glowing Dot Animation/image.jpg new file mode 100644 index 0000000..7ae053c Binary files /dev/null and b/Glowing Dot Animation/image.jpg differ diff --git a/Glowing Dot Animation/index.html b/Glowing Dot Animation/index.html new file mode 100644 index 0000000..130cd48 --- /dev/null +++ b/Glowing Dot Animation/index.html @@ -0,0 +1,32 @@ + + + + + + + Glowing Dot Animation + + + + + + + diff --git a/Glowing Dot Animation/readme.md b/Glowing Dot Animation/readme.md new file mode 100644 index 0000000..87ad94a --- /dev/null +++ b/Glowing Dot Animation/readme.md @@ -0,0 +1,2 @@ +# Glowing Dot Animation + \ No newline at end of file diff --git a/Glowing Dot Animation/style.css b/Glowing Dot Animation/style.css new file mode 100644 index 0000000..44fcde5 --- /dev/null +++ b/Glowing Dot Animation/style.css @@ -0,0 +1,75 @@ +body { + margin: 0; + padding: 0; + background: #262626; +} +ul { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; + padding: 0; + display: flex; +} +ul li { + list-style: none; + width: 40px; + height: 40px; + background: #fff; + border-radius: 50%; + animation: animate 1.6s ease-in-out infinite; +} +@keyframes animate { + 0%, + 40%, + 100% { + transform: scale(0.2); + } + 20% { + transform: scale(1); + } +} +ul li:nth-child(1) { + animation-delay: -1.4s; + background: #ffff00; + box-shadow: 0 0 50px #ffff00; +} +ul li:nth-child(2) { + animation-delay: -1.2s; + background: #76ff03; + box-shadow: 0 0 50px #76ff03; +} +ul li:nth-child(3) { + animation-delay: -1s; + background: #f06292; + box-shadow: 0 0 50px #f06292; +} +ul li:nth-child(4) { + animation-delay: -0.8s; + background: #4fc3f7; + box-shadow: 0 0 50px #4fc3f7; +} +ul li:nth-child(5) { + animation-delay: -0.6s; + background: #ba68c8; + box-shadow: 0 0 50px #ba68c8; +} +ul li:nth-child(6) { + animation-delay: -0.4s; + background: #f57c00; + box-shadow: 0 0 50px #f57c00; +} +ul li:nth-child(7) { + animation-delay: -0.2s; + background: #673ab7; + box-shadow: 0 0 50px #673ab7; +} +footer { + position: relative; + color: yellow; + top: 38.5rem; +} +footer a { + color: #fff; +} diff --git a/README.md b/README.md index ea4bd4a..879f81a 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,8 @@ | Loading Balls Animation | https://pulkit203.github.io/LoadingBalls/ | | Automatic Image Slider Animation|https://palaksharma23.github.io/Automatic-Image-Changing-Animation/ | | Confetti Animation | https://anjali1102.github.io/confetti_animation/ | -| Comets Animation | https://jonathanallisson.github.io/Comets/ | +| Comets Animation | https://jonathanallisson.github.io/Comets/ | +| Glowing Dot Animation | https://lavishbansal17.github.io/Glowing-Dot-Animation/ | --- ![Project Intro Gif](./Gif.gif)