Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
This commit is contained in:
@@ -1,5 +1,22 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const { animationDuration = 2, animationIterationCount = 'infinite' } =
|
||||
defineProps<{
|
||||
// 动画持续时间,单位秒
|
||||
animationDuration?: number;
|
||||
// 动画是否只执行一次
|
||||
animationIterationCount?: 'infinite' | number;
|
||||
}>();
|
||||
|
||||
const style = computed(() => {
|
||||
return {
|
||||
animation: `shine ${animationDuration}s linear ${animationIterationCount}`,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="vben-spine-text !bg-clip-text text-transparent">
|
||||
<div :style="style" class="vben-spine-text !bg-clip-text text-transparent">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -9,7 +26,8 @@
|
||||
radial-gradient(circle at center, rgb(255 255 255 / 80%), #f000) -200% 50% /
|
||||
200% 100% no-repeat,
|
||||
#000;
|
||||
animation: shine 3s linear infinite;
|
||||
|
||||
/* animation: shine 3s linear infinite; */
|
||||
}
|
||||
|
||||
.dark .vben-spine-text {
|
||||
|
Reference in New Issue
Block a user