<footer class="api-footer">
  <!-- 动态文字背景层 -->
  <div class="text-background"></div>
  
  <!-- 页脚内容容器 -->
  <div class="footer-content">
    <!-- 站点信息 -->
    <div class="site-info">
      <h2>龙图阁API站</h2>
      <p>提供高效、稳定、安全的API服务</p>
    </div>
    
    <!-- 功能按钮区 -->
    <div class="api-buttons">
      <button class="glow-btn" style="--btn-color: #4facfe; --btn-light: rgba(79, 172, 254, 0.3);">API文档</button>
      <button class="glow-btn" style="--btn-color: #00f2fe; --btn-light: rgba(0, 242, 254, 0.3);">接口测试</button>
      <button class="glow-btn" style="--btn-color: #7a04eb; --btn-light: rgba(122, 4, 235, 0.3);">开发者中心</button>
      <button class="glow-btn" style="--btn-color: #f9004d; --btn-light: rgba(249, 0, 77, 0.3);">价格方案</button>
      <button class="glow-btn" style="--btn-color: #fee140; --btn-light: rgba(254, 225, 64, 0.3);">联系我们</button>
      <button class="glow-btn" style="--btn-color: #34c759; --btn-light: rgba(52, 199, 89, 0.3);">关于我们</button>
    </div>
    
    <!-- 版权信息 -->
    <div class="copyright">
      <p>© 2025 龙图阁API站 版权所有 | 精心打造每一个API接口</p>
    </div>
  </div>
</footer>

<style>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页脚容器样式 - 放大版 */
.api-footer {
  position: relative;
  width: 100%;
  padding: 6rem 3rem 4rem;
  overflow: hidden;
  /* 渐变色背景 */
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: #fff;
}

/* 动态文字背景层 */
.text-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.1;
  overflow: hidden;
}

/* 动态文字样式 - 放大文字 */
.floating-text {
  position: absolute;
  color: rgba(255, 255, 255, 0.7);
  font-weight: bold;
  pointer-events: none;
  animation: floatRotate 8s infinite ease-in-out;
}

/* 文字旋转和浮动动画 */
@keyframes floatRotate {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-30px) rotate(15deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(30px) rotate(-15deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* 页脚内容样式 */
.footer-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

/* 站点信息样式 - 放大字体 */
.site-info {
  margin-bottom: 3rem;
}

.site-info h2 {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.site-info p {
  font-size: 1.3rem;
  opacity: 0.8;
}

/* 按钮容器样式 - 增加间距 */
.api-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* 流光按钮样式 - 中间有颜色且比边框浅 */
.glow-btn {
  padding: 1.2rem 2.2rem;
  border: 2px solid var(--btn-color); /* 边框使用较深的颜色 */
  border-radius: 15px;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
  background-color: var(--btn-light); /* 中间使用较浅的同色系颜色 */
  backdrop-filter: blur(3px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 0 15px var(--btn-color);
}

/* 按钮文字增强显示 */
.glow-btn {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* 按钮流光效果 */
.glow-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: shine 3s infinite;
}

/* 流光动画 */
@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(30deg);
  }
  100% {
    transform: translateX(100%) rotate(30deg);
  }
}

/* 鼠标悬停效果 */
.glow-btn:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 20px var(--btn-color);
  background-color: rgba(255, 255, 255, 0.4); /* 悬停时略微变白 */
  border-color: rgba(255, 255, 255, 0.7); /* 边框也变浅 */
}

/* 版权信息样式 - 放大文字 */
.copyright {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.1rem;
  opacity: 0.7;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .api-footer {
    padding: 4rem 1.5rem 2.5rem;
  }
  
  .site-info h2 {
    font-size: 2.2rem;
  }
  
  .site-info p {
    font-size: 1.1rem;
  }
  
  .glow-btn {
    padding: 1rem 1.8rem;
    font-size: 1rem;
    border-radius: 12px;
  }
  
  .copyright p {
    font-size: 0.9rem;
  }
}
</style>

<script>
// 生成动态文字
document.addEventListener('DOMContentLoaded', () => {
  const textContainer = document.querySelector('.text-background');
  const text = '龙图阁API站';
  const count = 60;
  
  // 生成多个文字元素
  for (let i = 0; i < count; i++) {
    const textElement = document.createElement('div');
    textElement.className = 'floating-text';
    textElement.textContent = text;
    
    // 随机位置
    const left = Math.random() * 100;
    const top = Math.random() * 100;
    
    // 随机大小
    const size = 18 + Math.random() * 30;
    
    // 随机动画延迟
    const delay = Math.random() * 5;
    
    // 随机不透明度
    const opacity = 0.2 + Math.random() * 0.5;
    
    // 应用样式
    textElement.style.left = `${left}%`;
    textElement.style.top = `${top}%`;
    textElement.style.fontSize = `${size}px`;
    textElement.style.animationDelay = `${delay}s`;
    textElement.style.opacity = opacity;
    
    textContainer.appendChild(textElement);
  }
  
  // 添加背景微妙动画
  const footer = document.querySelector('.api-footer');
  let angle = 0;
  
  setInterval(() => {
    angle = (angle + 0.1) % 360;
    footer.style.background = `linear-gradient(${angle}deg, #0f0c29 0%, #302b63 50%, #24243e 100%)`;
  }, 5000);
});
</script>