atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

updated StarBorder component with tailwind css

Browse Source
This commit is contained in:
sayedTahsin
2025-07-19 20:17:28 +06:00
parent 9acb5ca46f
commit 73332734c5
1 changed files with 26 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,22 @@
<template> <template>
<component :is="as" class="star-border-container" :class="customClass" v-bind="restAttrs" :style="componentStyle"> <component :is="as" :class="[
<div class="border-gradient-bottom" :style="{ 'relative inline-block overflow-hidden !bg-transparent !border-none !rounded-[20px]',
background: `radial-gradient(circle, ${color}, transparent 10%)`, customClass
animationDuration: speed ]" v-bind="restAttrs" :style="componentStyle">
}"></div> <div class="absolute w-[300%] h-[50%] opacity-70 bottom-[-11px] right-[-250%] rounded-full animate-star-movement-bottom z-0"
<div class="border-gradient-top" :style="{ :style="{
background: `radial-gradient(circle, ${color}, transparent 10%)`, background: `radial-gradient(circle, ${color}, transparent 10%)`,
animationDuration: speed animationDuration: speed
}"></div> }"></div>
<div class="inner-content">
<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 /> <slot />
</div> </div>
</component> </component>
@@ -45,51 +53,6 @@ const componentStyle = computed(() => {
</script> </script>
<style scoped> <style scoped>
.star-border-container {
all: unset;
display: inline-block;
position: relative;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
}
.border-gradient-bottom {
position: absolute;
width: 300%;
height: 50%;
opacity: 0.7;
bottom: -12px;
right: -250%;
border-radius: 50%;
animation: star-movement-bottom linear infinite alternate;
z-index: 0;
}
.border-gradient-top {
position: absolute;
opacity: 0.7;
width: 300%;
height: 50%;
top: -12px;
left: -250%;
border-radius: 50%;
animation: star-movement-top linear infinite alternate;
z-index: 0;
}
.inner-content {
position: relative;
border: 1px solid #222;
background: #000;
color: white;
font-size: 16px;
text-align: center;
padding: 16px 26px;
border-radius: 20px;
z-index: 1;
}
@keyframes star-movement-bottom { @keyframes star-movement-bottom {
0% { 0% {
transform: translate(0%, 0%); transform: translate(0%, 0%);
@@ -113,4 +76,12 @@ const componentStyle = computed(() => {
opacity: 0; opacity: 0;
} }
} }
.animate-star-movement-bottom {
animation: star-movement-bottom linear infinite alternate;
}
.animate-star-movement-top {
animation: star-movement-top linear infinite alternate;
}
</style> </style>