/
ifrolove
/
vdf
Обзор
Документация
Войти
/
ifrolove
/
vdf
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
main
src/components/interactive/GradientText.vue
63 строки
1 KB
ifrolov
заголовки
01 мар 2026, 16:28
01 мар 2026, 16:28
dbd8209
Код
Авторство
О чём код?
<script setup lang="ts"> import { computed } from "vue"; type GradientTextProps = { text?: string; className?: string; colors?: string[]; animationSpeed?: number; showBorder?: boolean; }; const props = withDefaults(defineProps<GradientTextProps>(), { text: "", className: "", colors: () => ["#ffaa40", "#9c40ff", "#ffaa40"], animationSpeed: 8, showBorder: false, }); const gradientStyle = computed(() => ({ backgroundImage: `linear-gradient(to right, ${props.colors.join(", ")})`, animationDuration: `${props.animationSpeed}s`, backgroundSize: "300% 100%", "--animation-duration": `${props.animationSpeed}s`, })); const textStyle = computed(() => ({ ...gradientStyle.value, backgroundClip: "text", WebkitBackgroundClip: "text", })); </script> <template> <div class="relative mx-auto flex max-w-fit flex-row items-center justify-center overflow-hidden transition-shadow duration-500" > <h2 :style="textStyle" class="animate-gradient inline-block bg-cover px-5 text-9xl tracking-wide text-transparent lg:pl-10 2xl:pl-20" > {{ text }} </h2> </div> </template> <style scoped> .animate-gradient { animation: gradient var(--animation-duration, 8s) linear infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style>