feat(style.css): animmate the header text

Dun-sin · Jul 29, 2022 · f9b6a7d · f9b6a7d · vercel · Jul 29, 2022
1 parent 866c850
commit f9b6a7d
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/src/style.css b/src/style.css
@@ -51,6 +51,7 @@ nav h1 {
 	-webkit-text-fill-color: transparent;
 	background-clip: text;
 	cursor: pointer;
+	animation: moveColor 500ms ease-in infinite alternate;
 }
 
 .menu {
@@ -322,6 +323,21 @@ a {
 	color: var(--text-color);
 }
 
+@keyframes moveColor {
+	0% {
+		background: linear-gradient(26deg, rgb(255, 255, 255), rgb(105, 143, 216));
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+	}
+	100% {
+		background: linear-gradient(272deg, rgb(255, 255, 255), rgb(105, 143, 216));
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+	}
+}
+
 @media screen and (max-width: 1300px) and (min-width: 1009px) {
 	:root {
 		--modal-width: calc(var(--modal-container-width) - 20vw);