LoongPanel-Asp/web/components/HeroBox.vue

79 lines
2.0 KiB
Vue
Executable File

<template>
<div class="circle-container">
<div
v-for="(circle, index) in circles"
:key="index"
:style="circle.style as any"
class="hero-box-circle"
></div>
</div>
</template>
<script lang="ts" setup>
import {computed} from 'vue';
// 定义同心圆的数量
const circleCount = 10;
// 计算每个同心圆的样式
const circles = computed(() => {
const circlesArray = [];
for (let i = 0; i < circleCount; i++) {
const size = 300 + (i + 1) * 300; // 每个圆的大小递增
const maxOffset = 20 + 7 * (i + 1); // 最大偏移量递增
const randomOffsetX = Math.random() * (maxOffset + maxOffset) - maxOffset; // 随机偏移量X
const randomOffsetY = Math.random() * (maxOffset + maxOffset) - maxOffset; // 随机偏移量Y
circlesArray.push({
style: {
width: `${size}px`,
height: `${size}px`,
borderRadius: '50%',
position: 'absolute',
top: `20%`,
left: `20%`,
//设置层级
transform: `translate(${randomOffsetX - size / 2}px, ${randomOffsetY - size / 2}px)`,
zIndex: circleCount - i,
},
});
}
return circlesArray;
});
const {$gsap} = useNuxtApp()
onMounted(() => {
$gsap.fromTo('.hero-box-circle', {
opacity: 0,
scale: 0.8,
}, {
opacity: 1,
scale: 1,
duration: 0.6,
delay: 1,
ease: 'power3.out',
stagger: {
each: 0.1, // 每个动画之间的延迟
from: 'center' // 从中间开始展开
},
});
})
</script>
<style lang="scss" scoped>
@import "base";
.circle-container {
position: relative;
width: 100%;
height: 5000px;
margin: auto;
//background: radial-gradient(50% 50% at 50% 50%, rgba($primary-color, 0.2) 0%, $primary-color 100%);
background: radial-gradient(36.28% 150.93% at 50% 50%, #3B8AFF 0%, #0048B2 100%);
}
.hero-box-circle {
//background: radial-gradient(50% 50% at 50% 50%, rgba($primary-color, 0.2) 0%, $primary-color 100%);
box-shadow: 24px 32px 184px 24px rgba(6, 8, 89, 0.75) inset;
}
</style>