Html+tailwind实现一个landing页面

 

  • 动态渐变背景：采用当前流行的、如极光般流动的网格渐变背景（Aurora Gradient Mesh），为整个页面提供一个充满活力和深度的基底。
  • 3D交互式卡片：核心功能卡片将增加3D倾斜的悬停效果。当鼠标在卡片上移动时，卡片会跟随鼠标产生微妙的3D旋转和光泽效果，极大地增强了互动感和趣味性。
  • 滚动触发动画：页面中的各个模块（如核心流程、客户评价等）会在用户滚动到可视区域时，以平滑的动画（淡入、上移）形式出现，让整个浏览过程充满节奏感和惊喜。
  • 精致的UI元素：
    • 玻璃拟态 (Glassmorphism)：在导航栏和部分卡片上使用磨砂玻璃效果，使其在复杂的动态背景上依然清晰，并富有层次感。
    • 悬浮辉光效果：为关键按钮和交互元素添加辉光（Glow）效果，使其在视觉上更突出，更具吸引力。
    • SVG图标动画：为核心流程中的图标添加微妙的动画效果。
  • 动态客户评价轮播：将静态的客户评价模块升级为自动播放的轮播组件，既能节省空间，又能动态展示更多内容。
  • 更具吸引力的英雄区：在主视觉区域中心，加入一个抽象的、缓慢旋转的3D几何图形，作为视觉焦点，象征着“核心”、“保护”与“科技”。
<!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://cdn.tailwindcss.com"></script>
  <style>
      @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

      body {
          font-family: 'Noto Sans SC', sans-serif;
          background-color: #f0f2f5;
          color: #1a202c;
          overflow-x: hidden;
      }

      /* 动态极光背景 */
      .aurora-background {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          overflow: hidden;
      }
      .aurora-background::before, .aurora-background::after {
          content: '';
          position: absolute;
          width: 80vw;
          height: 80vw;
          max-width: 800px;
          max-height: 800px;
          border-radius: 50%;
          filter: blur(100px);
          opacity: 0.2;
          will-change: transform;
      }
      .aurora-background::before {
          top: -20%;
          left: -20%;
          background: radial-gradient(circle, #3b82f6, transparent 60%);
          animation: move-aurora-1 15s infinite alternate ease-in-out;
      }
      .aurora-background::after {
          bottom: -20%;
          right: -20%;
          background: radial-gradient(circle, #ec4899, transparent 60%);
          animation: move-aurora-2 15s infinite alternate ease-in-out;
          animation-delay: -7.5s;
      }
      @keyframes move-aurora-1 {
          from { transform: translate(0, 0) rotate(0deg); }
          to { transform: translate(100px, 50px) rotate(45deg); }
      }
      @keyframes move-aurora-2 {
          from { transform: translate(0, 0) rotate(0deg); }
          to { transform: translate(-100px, -50px) rotate(-45deg); }
      }

      /* 滚动触发动画 */
      .reveal-on-scroll {
          opacity: 0;
          transform: translateY(30px);
          transition: opacity 0.8s ease-out, transform 0.8s ease-out;
      }
      .reveal-on-scroll.is-visible {
          opacity: 1;
          transform: translateY(0);
      }

      /* 3D卡片效果 */
      .card-3d {
          transition: transform 0.1s ease, box-shadow 0.3s ease;
          transform-style: preserve-3d;
      }
      .card-3d:hover {
          box-shadow: 0 40px 50px -20px rgba(0, 0, 0, 0.2);
      }

      /* 英雄区3D旋转图形 */
      .hero-shape {
          transform-style: preserve-3d;
          animation: rotate-shape 20s infinite linear;
      }
      .hero-shape > div {
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
          border: 1px solid rgba(255, 255, 255, 0.3);
          backdrop-filter: blur(5px);
      }
      @keyframes rotate-shape {
          from { transform: rotateX(0deg) rotateY(0deg); }
          to { transform: rotateX(360deg) rotateY(360deg); }
      }
  </style>
</head>
<body class="antialiased">

  <div class="aurora-background"></div>

  <div class="relative z-10">
      <!-- 导航栏 (玻璃拟态) -->
      <nav class="bg-white/70 backdrop-blur-xl sticky top-4 mx-4 md:mx-auto max-w-6xl rounded-xl z-50 border border-white/20 shadow-sm">
          <div class="container mx-auto px-6">
              <div class="flex justify-between items-center h-20">
                  <a href="#" class="flex items-center gap-2">
                      <svg class="w-8 h-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.286zm0 13.036h.008v.008h-.008v-.008z" /></svg>
                      <span class="text-xl font-bold text-slate-800">授权护航</span>
                  </a>
                  <div class="hidden md:flex items-center space-x-8">
                      <a href="#" class="text-slate-600 hover:text-blue-600 font-medium transition-colors">核心功能</a>
                      <a href="#" class="text-slate-600 hover:text-blue-600 font-medium transition-colors">解决方案</a>
                      <a href="#" class="text-slate-600 hover:text-blue-600 font-medium transition-colors">客户案例</a>
                  </div>
                  <a href="#" class="hidden md:block bg-blue-600 text-white font-semibold py-2.5 px-6 rounded-lg transition-all transform hover:scale-105 hover:shadow-lg hover:shadow-blue-500/30">
                      立即开始
                  </a>
              </div>
          </div>
      </nav>

      <!-- 主内容区 -->
      <main class="container mx-auto px-6">
          <!-- 英雄区 -->
          <section class="text-center py-24 md:py-32 relative">
              <div class="absolute inset-0 flex items-center justify-center" style="perspective: 1000px;">
                  <div class="hero-shape w-64 h-64 md:w-96 md:h-96 relative">
                      <div class="absolute inset-0 rounded-full" style="transform: rotateY(0deg) translateZ(80px);"></div>
                      <div class="absolute inset-0 rounded-full" style="transform: rotateY(60deg) translateZ(80px);"></div>
                      <div class="absolute inset-0 rounded-full" style="transform: rotateY(120deg) translateZ(80px);"></div>
                  </div>
              </div>
              <div class="relative">
                  <h1 class="text-5xl md:text-7xl font-black tracking-tight text-slate-900 reveal-on-scroll">
                      新一代授权
                      <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-pink-500">保障护航</span>
                  </h1>
                  <p class="mt-6 text-lg text-slate-600 max-w-2xl mx-auto reveal-on-scroll" style="transition-delay: 150ms;">
                      品质改变一切，服务成就未来。我们提供一站式产业数据解决方案，助力企业高效协同，持续创新。
                  </p>
                  <div class="mt-8 flex justify-center gap-4 reveal-on-scroll" style="transition-delay: 300ms;">
                      <a href="#" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg transition-all transform hover:scale-105 shadow-xl shadow-blue-500/20 hover:shadow-blue-500/40">
                          免费试用
                      </a>
                  </div>
              </div>
          </section>

          <!-- 特性网格 (3D交互) -->
          <section class="py-20">
              <div class="text-center mb-16 reveal-on-scroll">
                  <h2 class="text-4xl font-bold text-slate-900">四大核心优势</h2>
                  <p class="text-slate-600 mt-4 max-w-xl mx-auto">我们通过技术创新，为您提供无与伦比的价值。</p>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8" style="perspective: 1500px;">
                  <!-- 卡片 1 -->
                  <div class="card-3d bg-white/60 backdrop-blur-lg border border-white/30 rounded-2xl p-8 flex flex-col items-center text-center reveal-on-scroll">
                      <div class="bg-orange-100 p-4 rounded-full"><span class="text-4xl">📊</span></div>
                      <h3 class="text-xl font-semibold text-slate-900 mt-6">更懂产业数据</h3>
                      <p class="text-slate-600 mt-2 text-sm">重新定义产业数据, 为企业提供一个独立拥有全网资源高效协同的平台。</p>
                  </div>
                  <!-- 卡片 2 -->
                  <div class="card-3d bg-white/60 backdrop-blur-lg border border-white/30 rounded-2xl p-8 flex flex-col items-center text-center reveal-on-scroll" style="transition-delay: 150ms;">
                      <div class="bg-pink-100 p-4 rounded-full"><span class="text-4xl">🤝</span></div>
                      <h3 class="text-xl font-semibold text-slate-900 mt-6">协同更高率</h3>
                      <p class="text-slate-600 mt-2 text-sm">提供独立自助的供应链平台，促进上下游协同, 提升供应链效率。</p>
                  </div>
                  <!-- 卡片 3 -->
                  <div class="card-3d bg-white/60 backdrop-blur-lg border border-white/30 rounded-2xl p-8 flex flex-col items-center text-center reveal-on-scroll" style="transition-delay: 300ms;">
                      <div class="bg-blue-100 p-4 rounded-full"><span class="text-4xl">🚀</span></div>
                      <h3 class="text-xl font-semibold text-slate-900 mt-6">产品持续迭代</h3>
                      <p class="text-slate-600 mt-2 text-sm">不断迭代，持续优化，反应迅速更符合企业的动态需求。</p>
                  </div>
                  <!-- 卡片 4 -->
                  <div class="card-3d bg-white/60 backdrop-blur-lg border border-white/30 rounded-2xl p-8 flex flex-col items-center text-center reveal-on-scroll" style="transition-delay: 450ms;">
                      <div class="bg-teal-100 p-4 rounded-full"><span class="text-4xl">💰</span></div>
                      <h3 class="text-xl font-semibold text-slate-900 mt-6">零成本实现大数据+</h3>
                      <p class="text-slate-600 mt-2 text-sm">免费搭建、免费维护，免费提供产业级数据解决方案。</p>
                  </div>
              </div>
          </section>

          <!-- 客户评价轮播 -->
          <section class="py-20">
              <div class="text-center mb-16 reveal-on-scroll">
                  <h2 class="text-4xl font-bold text-slate-900">客户的信赖</h2>
                  <p class="text-slate-600 mt-4 max-w-xl mx-auto">听听我们的客户如何评价授权护航。</p>
              </div>
              <div class="relative w-full max-w-4xl mx-auto overflow-hidden reveal-on-scroll">
                  <div id="testimonial-slider" class="flex transition-transform duration-500 ease-in-out">
                      <!-- Testimonial 1 -->
                      <div class="w-full flex-shrink-0 p-4">
                          <div class="bg-white/60 backdrop-blur-lg border border-white/30 p-8 rounded-lg shadow-sm text-center">
                              <p class="text-slate-700 text-lg italic">“这套系统极大地提升了我们供应链的透明度和效率，现在我们可以实时追踪所有关键数据。”</p>
                              <div class="flex items-center justify-center mt-6">
                                  <img class="w-12 h-12 rounded-full mr-4" src="https://i.pravatar.cc/48?u=1" alt="Avatar">
                                  <div>
                                      <p class="font-semibold text-slate-900">王经理</p>
                                      <p class="text-slate-500 text-sm">某科技公司</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Testimonial 2 -->
                      <div class="w-full flex-shrink-0 p-4">
                           <div class="bg-white/60 backdrop-blur-lg border border-white/30 p-8 rounded-lg shadow-sm text-center">
                              <p class="text-slate-700 text-lg italic">“产品迭代速度非常快，客服团队响应及时，总能快速解决我们遇到的问题。真正做到了服务至上。”</p>
                              <div class="flex items-center justify-center mt-6">
                                  <img class="w-12 h-12 rounded-full mr-4" src="https://i.pravatar.cc/48?u=2" alt="Avatar">
                                  <div>
                                      <p class="font-semibold text-slate-900">李总</p>
                                      <p class="text-slate-500 text-sm">某制造企业</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- Testimonial 3 -->
                      <div class="w-full flex-shrink-0 p-4">
                           <div class="bg-white/60 backdrop-blur-lg border border-white/30 p-8 rounded-lg shadow-sm text-center">
                              <p class="text-slate-700 text-lg italic">“零成本搭建这一点太吸引人了！为我们初创公司节省了大量的初期投入，让我们能专注于核心业务。”</p>
                              <div class="flex items-center justify-center mt-6">
                                  <img class="w-12 h-12 rounded-full mr-4" src="https://i.pravatar.cc/48?u=3" alt="Avatar">
                                  <div>
                                      <p class="font-semibold text-slate-900">张先生</p>
                                      <p class="text-slate-500 text-sm">某电商平台</p>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </section>

          <!-- 常见问题 -->
          <section class="py-20">
              <div class="max-w-3xl mx-auto reveal-on-scroll">
                  <h2 class="text-4xl font-bold text-center mb-10 text-slate-900">常见问题</h2>
                  <div class="space-y-4">
                      <!-- 问题模板 -->
                      <div class="bg-white/60 backdrop-blur-lg border border-white/30 rounded-lg">
                          <details class="p-5 group">
                              <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
                                  <span class="text-slate-800">获取商业版权后可以去除全部商业版权吗?</span>
                                  <span class="transition group-open:rotate-180">
                                      <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                                  </span>
                              </summary>
                              <p class="text-slate-600 mt-3 group-open:animate-fadeIn">是的，在获得商业授权后，您可以移除所有与商业版权相关的标识和链接。</p>
                          </details>
                      </div>
                      <!-- 其他问题... -->
                  </div>
              </div>
          </section>

          <!-- 行动号召 (CTA) -->
          <section class="py-20">
              <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl p-12 text-center text-white relative overflow-hidden reveal-on-scroll">
                  <h2 class="text-4xl font-bold">准备好提升您的业务了吗？</h2>
                  <p class="mt-4 max-w-xl mx-auto opacity-90">立即加入我们，体验前所未有的数据协同能力，开启您的业务新篇章。</p>
                  <a href="#" class="mt-8 inline-block bg-white text-blue-600 font-bold py-3 px-8 rounded-lg transition-transform transform hover:scale-105 shadow-lg">
                      立即获取授权
                  </a>
              </div>
          </section>
      </main>
  </div>

  <script>
  document.addEventListener('DOMContentLoaded', function () {
      // 滚动触发动画
      const scrollObserver = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
              if (entry.isIntersecting) {
                  entry.target.classList.add('is-visible');
                  scrollObserver.unobserve(entry.target);
              }
          });
      }, { threshold: 0.1 });

      document.querySelectorAll('.reveal-on-scroll').forEach(el => {
          scrollObserver.observe(el);
      });

      // 3D卡片效果
      const cards = document.querySelectorAll('.card-3d');
      cards.forEach(card => {
          card.addEventListener('mousemove', (e) => {
              const rect = card.getBoundingClientRect();
              const x = e.clientX - rect.left;
              const y = e.clientY - rect.top;
              const { width, height } = rect;
              const rotateX = (y / height - 0.5) * -20; // 倾斜角度
              const rotateY = (x / width - 0.5) * 20;

              card.style.transform = `perspective(1500px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
          });

          card.addEventListener('mouseleave', () => {
              card.style.transform = 'perspective(1500px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
          });
      });

      // 客户评价轮播
      const slider = document.getElementById('testimonial-slider');
      if (slider) {
          let currentIndex = 0;
          const slides = slider.children;
          const totalSlides = slides.length;

          setInterval(() => {
              currentIndex = (currentIndex + 1) % totalSlides;
              slider.style.transform = `translateX(-${currentIndex * 100}%)`;
          }, 5000); // 每5秒切换一次
      }
      
      // 解决 <details> 动画问题
      tailwind.config = {
          theme: {
              extend: {
                  animation: {
                      fadeIn: 'fadeIn 0.5s ease-in-out',
                  },
                  keyframes: {
                      fadeIn: {
                          '0%': { opacity: 0 },
                          '100%': { opacity: 1 },
                      },
                  },
              },
          },
      };
  });
  </script>
</body>
</html>

 

 

阅读: 17 | 发布时间: 2025-08-06 14:54:10