atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-09 00:19:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Small fixes

Browse Source
This commit is contained in:
David Haz
2025-07-19 19:55:19 +03:00
parent a6df503535
commit 340985ce52
8 changed files with 350 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/content/Animations/StarBorder/StarBorder.vue
View File

@@ -1,87 +1,94 @@
<template>
<component :is="as" :class="[
'relative inline-block overflow-hidden !bg-transparent !border-none !rounded-[20px]',
customClass
]" v-bind="restAttrs" :style="componentStyle">
<div class="absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0"
:style="{
background: `radial-gradient(circle, ${color}, transparent 10%)`,
animationDuration: speed
}"></div>
<component
:is="as"
:class="['relative inline-block overflow-hidden !bg-transparent !border-none !rounded-[20px]', customClass]"
v-bind="restAttrs"
:style="componentStyle"
>
<div
class="absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0"
:style="{
background: `radial-gradient(circle, ${color}, transparent 10%)`,
animationDuration: speed
}"
></div>
<div class="absolute w-[300%] h-[50%] opacity-70 top-[-10px] left-[-250%] rounded-full animate-star-movement-top z-0"
:style="{
background: `radial-gradient(circle, ${color}, transparent 10%)`,
animationDuration: speed
}"></div>
<div
class="absolute w-[300%] h-[50%] opacity-70 top-[-10px] left-[-250%] rounded-full animate-star-movement-top z-0"
:style="{
background: `radial-gradient(circle, ${color}, transparent 10%)`,
animationDuration: speed
}"
></div>
<div
class="relative z-10 border border-[#222] bg-black text-white text-[16px] text-center px-[26px] py-[16px] rounded-[20px]">
<slot />
</div>
</component>
<div
class="relative z-10 border border-[#333] bg-[#0b0b0b] text-white text-[16px] text-center px-[64px] py-[24px] rounded-[20px]"
>
<slot />
</div>
</component>
</template>
<script setup lang="ts">
import { computed, defineProps, useAttrs } from 'vue';
interface StarBorderProps {
as?: string;
customClass?: string;
color?: string;
speed?: string;
thickness?: number;
as?: string;
customClass?: string;
color?: string;
speed?: string;
thickness?: number;
}
const props = withDefaults(defineProps<StarBorderProps>(), {
as: 'button',
customClass: '',
color: 'white',
speed: '6s',
thickness: 1
as: 'button',
customClass: '',
color: 'white',
speed: '6s',
thickness: 1
});
const restAttrs = useAttrs();
const componentStyle = computed(() => {
const base = {
padding: `${props.thickness}px 0`
};
const userStyle = (restAttrs.style as Record<string, string>) || {};
return { ...base, ...userStyle };
const base = {
padding: `${props.thickness}px 0`
};
const userStyle = (restAttrs.style as Record<string, string>) || {};
return { ...base, ...userStyle };
});
</script>
<style scoped>
@keyframes star-movement-bottom {
0% {
transform: translate(0%, 0%);
opacity: 1;
}
0% {
transform: translate(0%, 0%);
opacity: 1;
}
100% {
transform: translate(-100%, 0%);
opacity: 0;
}
100% {
transform: translate(-100%, 0%);
opacity: 0;
}
}
@keyframes star-movement-top {
0% {
transform: translate(0%, 0%);
opacity: 1;
}
0% {
transform: translate(0%, 0%);
opacity: 1;
}
100% {
transform: translate(100%, 0%);
opacity: 0;
}
100% {
transform: translate(100%, 0%);
opacity: 0;
}
}
.animate-star-movement-bottom {
animation: star-movement-bottom linear infinite alternate;
animation: star-movement-bottom linear infinite alternate;
}
.animate-star-movement-top {
animation: star-movement-top linear infinite alternate;
animation: star-movement-top linear infinite alternate;
}
</style>