From e4f85415202d52912ff3c6e4dad6573ff018e147 Mon Sep 17 00:00:00 2001 From: sD Date: Sun, 22 Dec 2019 20:26:45 +0100 Subject: add rainbow text --- webAO/client.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'webAO/client.css') diff --git a/webAO/client.css b/webAO/client.css index 04d7bb3..8c77a90 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -250,6 +250,25 @@ img { color: white; } +.rainbow-text { + background-image: repeating-linear-gradient(to right, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange); + background-size: 200% 200%; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: rainbow_alt 1s linear infinite; + } + + @keyframes rainbow { + 0%,100% {background-position: 0 0; } + 50% {background-position: 100% 0; } + } + + @keyframes rainbow_alt { + 0% {background-position: 0 0; } + 100% { background-position: 100% 0; } + } + #client_inputbox { font-size: 21px; padding: 2px 10px; -- cgit From 82b74bb94f89ccc46edbe689cf5da3f6422638b3 Mon Sep 17 00:00:00 2001 From: sD Date: Sun, 22 Dec 2019 20:42:46 +0100 Subject: adjust animation timing to loop --- webAO/client.css | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'webAO/client.css') diff --git a/webAO/client.css b/webAO/client.css index 8c77a90..4199cf9 100644 --- a/webAO/client.css +++ b/webAO/client.css @@ -251,22 +251,26 @@ img { } .rainbow-text { - background-image: repeating-linear-gradient(to right, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange); - background-size: 200% 200%; + background-color: rgb(255, 255, 255); + background-image: repeating-linear-gradient(to right, + red 0% 8%, orange 8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%, + red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%, + red 80% 88%, orange 88% 96%, yellow 96% 100% ); + background-size: 40% 40%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; - animation: rainbow_alt 1s linear infinite; + animation: rainbow 4s linear infinite; } - @keyframes rainbow { - 0%,100% {background-position: 0 0; } - 50% {background-position: 100% 0; } + @keyframes rainbow_alt { + 0%,100% {background-position: 0 0; } + 50% {background-position: 400% 0; } } - @keyframes rainbow_alt { - 0% {background-position: 0 0; } - 100% { background-position: 100% 0; } + @keyframes rainbow { + 0% {background-position: 0 0; } + 100% {background-position: 400% 0; } } #client_inputbox { -- cgit