127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
const wrapper = ref(null)
|
|
const mouseX = ref(0)
|
|
const mouseY = ref(0)
|
|
|
|
const handleMouseMove = (e) => {
|
|
if (!wrapper.value) return
|
|
const rect = wrapper.value.getBoundingClientRect()
|
|
const x = e.clientX - rect.left - rect.width / 2
|
|
const y = e.clientY - rect.top - rect.height / 2
|
|
mouseX.value = x * 0.1
|
|
mouseY.value = y * 0.1
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('mousemove', handleMouseMove)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('mousemove', handleMouseMove)
|
|
})
|
|
|
|
const icons = [
|
|
{ char: '💬', top: '10%', left: '20%', size: '3rem', delay: '0s', z: 2 },
|
|
{ char: '👍', top: '70%', left: '10%', size: '2.5rem', delay: '-2s', z: 3 },
|
|
{ char: '📰', top: '15%', left: '75%', size: '2.8rem', delay: '-1s', z: 1 },
|
|
{ char: '💡', top: '65%', left: '80%', size: '3.5rem', delay: '-3s', z: 4 },
|
|
{ char: '📝', top: '40%', left: '85%', size: '2.2rem', delay: '-1.5s', z: 2 },
|
|
{ char: '🧩', top: '80%', left: '50%', size: '2.6rem', delay: '-0.5s', z: 1 },
|
|
{ char: '💎', top: '30%', left: '10%', size: '2.4rem', delay: '-2.5s', z: 3 },
|
|
{ char: '🔥', top: '40%', left: '45%', size: '4.5rem', delay: '-0.8s', z: 5 }, // 中心醒目
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="hero-anim-wrapper" ref="wrapper" :style="{ transform: `translate(${mouseX}px, ${mouseY}px)` }">
|
|
<div class="glow-bg"></div>
|
|
<div v-for="(icon, idx) in icons" :key="idx" class="floating-icon" :style="{
|
|
top: icon.top,
|
|
left: icon.left,
|
|
fontSize: icon.size,
|
|
animationDelay: icon.delay,
|
|
zIndex: icon.z
|
|
}">
|
|
<div class="icon-inner">
|
|
{{ icon.char }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.hero-anim-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 320px;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
transition: transform 0.1s ease-out;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.glow-bg {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(circle, rgba(34, 150, 242, 0.4) 0%, rgba(34, 150, 242, 0) 70%);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: pulse 4s infinite alternate;
|
|
z-index: 0;
|
|
}
|
|
|
|
.floating-icon {
|
|
position: absolute;
|
|
will-change: transform;
|
|
animation: float 6s ease-in-out infinite;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
filter: drop-shadow(0 8px 16px rgba(34,150,242,0.3));
|
|
}
|
|
|
|
.icon-inner {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-radius: 20px;
|
|
padding: 10px;
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
backdrop-filter: blur(8px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.3s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dark .icon-inner {
|
|
background: rgba(30, 30, 30, 0.7);
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.icon-inner:hover {
|
|
transform: scale(1.2) rotate(10deg);
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0px) rotate(0deg); }
|
|
33% { transform: translateY(-15px) rotate(5deg); }
|
|
66% { transform: translateY(10px) rotate(-5deg); }
|
|
100% { transform: translateY(0px) rotate(0deg); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
|
|
100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
|
|
}
|
|
</style>
|