diff --git a/Comets Animation/README.md b/Comets Animation/README.md new file mode 100644 index 0000000..966d3e5 --- /dev/null +++ b/Comets Animation/README.md @@ -0,0 +1,3 @@ +# Comets + +by [JonathanAllisson](https://github.com/JonathanAllisson) \ No newline at end of file diff --git a/Comets Animation/comets.png b/Comets Animation/comets.png new file mode 100644 index 0000000..93b4772 Binary files /dev/null and b/Comets Animation/comets.png differ diff --git a/Comets Animation/index.html b/Comets Animation/index.html new file mode 100644 index 0000000..7760a7a --- /dev/null +++ b/Comets Animation/index.html @@ -0,0 +1,22 @@ + + + + + + + + Comets + + +
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Comets Animation/styles.css b/Comets Animation/styles.css new file mode 100644 index 0000000..4a355dd --- /dev/null +++ b/Comets Animation/styles.css @@ -0,0 +1,83 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.container { + height: 100vh; + width: 100%; + background: rgb(21, 0, 61); +} + +.stone { + position: absolute; + width: 10px; + height: 140px; + background: linear-gradient(to top, #384284, transparent); + top: 100px; + left: 100px; + border-radius: 50px; + opacity: 0; + animation: stone 7s ease 0s infinite; +} +@keyframes stone { + from { + transform: translateY(-500%); + opacity: 1; + } + to { + transform: translateY(500%); + opacity: .3; + } +} + +.stone:nth-child(2){ + top: 320px; + left: 400px; + animation-delay: .7s; + animation-duration: 6s; +} +.stone:nth-child(3){ + top: 520px; + left: 200px; + animation-delay: .5s; + animation-duration: 3s; +} +.stone:nth-child(4){ + top: 120px; + right: 100px; + left: inherit; + animation-delay: .2s; + animation-duration: 4s; +} +.stone:nth-child(5){ + top: 320px; + right: 400px; + left: inherit; + animation-delay: .3s; + animation-duration: 7s; +} +.stone:nth-child(6){ + top: 520px; + right: 200px; + left: inherit; + animation-delay: .8s; + animation-duration: 7s; +} +.stone:nth-child(7){ + top: 0; + left: 40%; + animation-delay: .5s; + animation-duration: 4s; +} +.stone:nth-child(8){ + top: 400px; + left: 55%; + animation-delay: .9s; + animation-duration: 6s; +} +.stone:nth-child(even){ + background: linear-gradient(to top, #384fde, transparent); + box-shadow: 0 4px 94px #384fde; +} diff --git a/README.md b/README.md index 9abdfc9..ea4bd4a 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ | 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/ | --- ![Project Intro Gif](./Gif.gif)