update

2026-05-06 14:51:24 +08:00
parent 132b2fc310
commit b248d526d2
9 changed files with 2450 additions and 37 deletions
@@ -0,0 +1,126 @@
+<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>