diff --git a/README.md b/README.md index 8322c5c..80e4f1b 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ | Moon Light | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ | | Modal Animation | https://pulkit203.github.io/Modal-Animation/ | | Gradient Drop Shadow | https://gradientdropshadow.netlify.app/ | - +| Text Animation Effect|https://textanimationeffect.netlify.app/| --- ![Project Intro Gif](./Gif.gif) diff --git a/Text Animation Effect/image.gif b/Text Animation Effect/image.gif new file mode 100644 index 0000000..b1b67a3 Binary files /dev/null and b/Text Animation Effect/image.gif differ diff --git a/Text Animation Effect/index.html b/Text Animation Effect/index.html new file mode 100644 index 0000000..03421a7 --- /dev/null +++ b/Text Animation Effect/index.html @@ -0,0 +1,32 @@ + + + + + + + Text Animation Effect + + + +
+ L + O + A + D + I + N + G + . + . + . +
+ + + \ No newline at end of file diff --git a/Text Animation Effect/readme.md b/Text Animation Effect/readme.md new file mode 100644 index 0000000..396c38e --- /dev/null +++ b/Text Animation Effect/readme.md @@ -0,0 +1,2 @@ +# Text Animation Effect + \ No newline at end of file diff --git a/Text Animation Effect/syle.css b/Text Animation Effect/syle.css new file mode 100644 index 0000000..bd4e8f5 --- /dev/null +++ b/Text Animation Effect/syle.css @@ -0,0 +1,45 @@ +*{ + margin: 0; + padding: 0; + font-family: consolas; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #000; +} +.wavy{ + position: relative; + -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2)); +} +.wavy span{ + position: relative; + display: inline-block; + color: #fff; + font-size: 2em; + text-transform: uppercase; + animation: animate 1s ease-in-out infinite; + animation-delay: calc(0.1s * var(--i)); +} +@keyframes animate{ + 0%{ + transform: translateY(0px); + } + 20%{ + transform: translateY(-20px); + } + 40%,100%{ + transform: translateY(0px); + } +} +footer{ + position: relative; + color: #00ff5a; + top: 19rem; + right: 44rem; +} +a{ + color: blue; +} \ No newline at end of file