79 lines
2.0 KiB
Vue
Executable File
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>
|