✨그라데이션 텍스트 만들기 (타이머 안 텍스트)

애니매이션도 있음!!
depromeet · Nov 30, 2023 · 426cfb1 · 426cfb1
1 parent af9c254
commit 426cfb1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/panda.config.ts b/panda.config.ts
@@ -12,7 +12,15 @@ export default defineConfig({
 
   // Useful for theme customization
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        gradient: {
+          '0%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' },
+          '50%': { backgroundPositionX: '50%', backgroundPositionY: '100%' },
+          '100%': { transform: 'rotate(0deg)', backgroundPositionX: '0%', backgroundPositionY: '0%' },
+        },
+      },
+    },
   },
 
   // The output directory for your css system

diff --git a/src/app/timer/TimerView.tsx b/src/app/timer/TimerView.tsx
@@ -12,11 +12,7 @@ export default function TimerView({ category, time, isActive }: Props) {
     <div className={center()}>
       <div className={center(innerCss)}>
         <div className={css(categoryCss)}>{category}</div>
-        <div
-          className={css(timerTextCss, {
-            color: isActive ? '#ffbaba' : 'gray',
-          })}
-        >
+        <div className={css(timerTextCss)}>
           <span>{time[0]}</span>
           <span>:</span>
           <span>{time[1]}</span>
@@ -37,4 +33,12 @@ const innerCss = {
 
 const categoryCss = { color: '#4E5968', fontSize: '18px', fontWeight: '600', lineHeight: '150%' };
 
-const timerTextCss = { color: '#FF8C8C', fontSize: '70px', fontWeight: '700' };
+const timerTextCss = {
+  fontSize: '70px',
+  fontWeight: '700',
+  animation: 'gradient 3s ease-in-out infinite',
+  backgroundSize: '150% 200%!',
+  '-webkit-background-clip': 'text!',
+  color: 'transparent',
+  background: 'linear-gradient(108deg, #FF8C8C -1.04%, #5D8AFF 101.48%)',
+};