You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.1 KiB
57 lines
1.1 KiB
3 months ago
|
<template>
|
||
|
|
<p
|
||
|
|
:style="styleVar"
|
||
|
|
:class="
|
||
|
|
cn(
|
||
|
|
'radiant-animation bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--radiant-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]',
|
||
|
|
'bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent ',
|
||
|
|
$props.class,
|
||
|
|
)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<slot />
|
||
|
|
</p>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { cn } from '@/lib/utils'
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
duration: {
|
||
|
|
type: Number,
|
||
|
|
default: 1,
|
||
|
|
},
|
||
|
|
radiantWidth: {
|
||
|
|
type: Number,
|
||
|
|
default: 500,
|
||
|
|
},
|
||
|
|
class: String,
|
||
|
|
})
|
||
|
|
|
||
|
|
const styleVar = computed(() => {
|
||
|
|
return {
|
||
|
|
'--radiant-anim-duration': `${props.duration}s`,
|
||
|
|
'--radiant-width': `${props.radiantWidth}px`,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
@keyframes radiant {
|
||
|
|
0%,
|
||
|
|
90%,
|
||
|
|
100% {
|
||
|
|
background-position: calc(-100% - var(--radiant-width)) 0;
|
||
|
|
}
|
||
|
|
30%,
|
||
|
|
60% {
|
||
|
|
background-position: calc(100% + var(--radiant-width)) 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.radiant-animation {
|
||
|
|
animation: radiant var(--radiant-anim-duration) infinite;
|
||
|
|
}
|
||
|
|
</style>
|