所有项目提交

2025-04-15 15:54:58 +08:00
commit 640eb204d9
466 changed files with 26779 additions and 0 deletions
--- a/giantElephant/demo.html
+++ b/giantElephant/demo.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>双层波浪效果 - 增强版</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+            overflow-x: hidden;
+        }
+        
+        .wave-container {
+            position: relative;
+            width: 100%;
+            height: 220px;
+            background-color: #ffffff;
+            overflow: hidden;
+        }
+        
+        /* 波浪底色层 */
+        .wave-base {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to bottom, #4c7cf3 0%, #77a0ff 100%);
+        }
+        
+        /* 波浪图案层 */
+        .wave-pattern {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 400%;
+            height: 100%;
+            background-repeat: repeat-x;
+            background-size: 25% 100%;
+            animation: wave-animation 20s linear infinite;
+        }
+        
+        /* 深色波浪 */
+        .wave-dark {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%234c7cf3' fill-opacity='0.7' d='M0,0 L1200,0 L1200,80 C900,100 600,70 300,100 C150,110 50,90 0,80 L0,0 Z'%3E%3C/path%3E%3C/svg%3E");
+            z-index: 10;
+            animation-duration: 25s;
+        }
+        
+        /* 浅色波浪 - 增强可见度 */
+        .wave-light {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%239fbcff' fill-opacity='0.85' d='M0,50 L1200,50 L1200,100 C1000,80 800,110 600,90 C400,110 200,80 0,100 L0,50 Z'%3E%3C/path%3E%3C/svg%3E");
+            z-index: 11; /* 提高浅色波浪的层级 */
+            animation-duration: 18s;
+            animation-direction: reverse;
+            top: 30px; /* 调整位置，使波浪更加明显 */
+        }
+        
+        /* 最浅色波浪 - 增加第三层波浪增强层次感 */
+        .wave-lightest {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M0,70 L1200,70 L1200,110 C1050,90 800,105 600,95 C350,85 150,100 0,90 L0,70 Z'%3E%3C/path%3E%3C/svg%3E");
+            z-index: 12; 
+            animation-duration: 15s;
+            top: 70px; /* 位于最上层 */
+        }
+        
+        /* 波浪动画 */
+        @keyframes wave-animation {
+            0% {
+                transform: translateX(0);
+            }
+            100% {
+                transform: translateX(-25%);
+            }
+        }
+        
+        .content {
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 0 20px;
+            text-align: center;
+        }
+        
+        h1 {
+            color: #4c7cf3;
+            margin-bottom: 30px;
+        }
+    </style>
+</head>
+<body>
+    <div class="wave-container">
+        <!-- 底色渐变 -->
+        <div class="wave-base"></div>
+        
+        <!-- 三层波浪 -->
+        <div class="wave-pattern wave-dark"></div>
+        <div class="wave-pattern wave-light"></div>
+        <div class="wave-pattern wave-lightest"></div>
+    </div>
+    
+    <div class="content">
+        <h1>增强版双层波浪效果</h1>
+        <p>优化后的波浪效果，提高了浅色波浪的可见度，并添加了第三层最浅色波浪增强层次感。</p>
+    </div>
+</body>
+</html>