mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
50 lines
1016 B
Vue
50 lines
1016 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
interface ShinyTextProps {
|
|
text: string;
|
|
disabled?: boolean;
|
|
speed?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<ShinyTextProps>(), {
|
|
text: '',
|
|
disabled: false,
|
|
speed: 5,
|
|
className: ''
|
|
});
|
|
|
|
const animationDuration = computed(() => `${props.speed}s`);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="`text-[#b5b5b5a4] bg-clip-text inline-block ${!props.disabled ? 'animate-shine' : ''} ${props.className}`"
|
|
:style="{
|
|
backgroundImage:
|
|
'linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 60%)',
|
|
backgroundSize: '200% 100%',
|
|
WebkitBackgroundClip: 'text',
|
|
animationDuration: animationDuration
|
|
}"
|
|
>
|
|
{{ props.text }}
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@keyframes shine {
|
|
0% {
|
|
background-position: 100%;
|
|
}
|
|
100% {
|
|
background-position: -100%;
|
|
}
|
|
}
|
|
|
|
.animate-shine {
|
|
animation: shine 5s linear infinite;
|
|
}
|
|
</style>
|