diff --git a/Hover Animations/Text gradient animation/index.html b/Hover Animations/Text gradient animation/index.html new file mode 100644 index 0000000..39cfacb --- /dev/null +++ b/Hover Animations/Text gradient animation/index.html @@ -0,0 +1,13 @@ + + + + + + + Text Gradient Animations + + + +
This text will demonstrate the gradient animation
+ + \ No newline at end of file diff --git a/Hover Animations/Text gradient animation/style.css b/Hover Animations/Text gradient animation/style.css new file mode 100644 index 0000000..e16ce1e --- /dev/null +++ b/Hover Animations/Text gradient animation/style.css @@ -0,0 +1,36 @@ +body{ + background-color: #45011A; +} +.text{ + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%,-50%); + background: linear-gradient(-45deg,#DFB79E,#DFB79E,#2B0413, #2B0413, #E25052, #E25052); + background-size: 300%; + font-family: Arial, Helvetica, sans-serif; + font-weight: 900; + font-size: 5vw; + letter-spacing: -5px; + text-transform: uppercase; + -webkit-background-clip:text; + + -webkit-text-fill-color: transparent; + animation: animated_text 6s ease-in-out infinite; + -moz-animation: animated_text 6s ease-in-out infinite; + -webkit-animation: animated_text 6s ease-in-out infinite; + + +} +@keyframes animated_text { + 0%{ + background-position: 0px 50%; + + } + 50%{ + background-position: 100% 50% ; + } + 100%{ + background-position: 0px 50%; + } +} \ No newline at end of file