feat:交接

2025-11-04 19:25:16 +08:00
parent 4b8498203d
commit d45e556c20
20 changed files with 4441 additions and 677 deletions
--- a/背景/2.vue
+++ b/背景/2.vue
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>紫色星空渐变背景</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    body {
+      overflow: hidden;
+      font-family: 'Arial', sans-serif;
+    }
+    
+    .starry-sky {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      background: linear-gradient(135deg, #1a0b2e, #4a1e6d, #6b2c9c);
+      overflow: hidden;
+    }
+    
+    .star {
+      position: absolute;
+      background-color: #f9e076;
+      border-radius: 50%;
+      animation: twinkle 4s infinite ease-in-out;
+    }
+    
+    .star.small {
+      width: 2px;
+      height: 2px;
+    }
+    
+    .star.medium {
+      width: 3px;
+      height: 3px;
+    }
+    
+    .star.large {
+      width: 4px;
+      height: 4px;
+    }
+    
+    .star.x-large {
+      width: 5px;
+      height: 5px;
+      box-shadow: 0 0 10px 2px rgba(249, 224, 118, 0.7);
+    }
+    
+    @keyframes twinkle {
+      0%, 100% {
+        opacity: 0.3;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    
+    .content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: white;
+      text-align: center;
+      z-index: 10;
+      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    }
+    
+    .content h1 {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      color: #f9e076;
+    }
+    
+    .content p {
+      font-size: 1.2rem;
+      max-width: 600px;
+      line-height: 1.6;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="starry-sky">
+      <div 
+        v-for="(star, index) in stars" 
+        :key="index"
+        class="star"
+        :class="star.size"
+        :style="{
+          left: star.x + 'vw',
+          top: star.y + 'vh',
+          animationDelay: star.delay + 's'
+        }"
+      ></div>
+      
+      <div class="content">
+        <h1>紫色星空</h1>
+        <p>这是一个使用Vue实现的紫色渐变星空背景，带有闪烁的淡黄色星光点缀。</p>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const { createApp } = Vue;
+    
+    createApp({
+      data() {
+        return {
+          stars: []
+        }
+      },
+      mounted() {
+        this.generateStars();
+      },
+      methods: {
+        generateStars() {
+          const starCount = 150;
+          const sizes = ['small', 'medium', 'large', 'x-large'];
+          
+          for (let i = 0; i < starCount; i++) {
+            this.stars.push({
+              x: Math.random() * 100,
+              y: Math.random() * 100,
+              size: sizes[Math.floor(Math.random() * sizes.length)],
+              delay: Math.random() * 4
+            });
+          }
+        }
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>