360°查看器

360度查看器组件

360度查看器组件，具有微交互、三元色彩方案、复杂性、电子商务目的、响应式设计、支持暗主题以及Tailwind CSS。

                <div class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 min-h-screen p-4">
  <div class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="product-image w-full h-64 object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-300">
        <button class="text-white text-2xl focus:outline-none">
          <i class="fas fa-expand"></i>
        </button>
      </div>
    </div>
    <div class="p-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-gray-900 dark:text-white">$199.99</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">
          Add to Cart
        </button>
      </div>
    </div>
    <div class="flex justify-center py-2 bg-gray-200 dark:bg-gray-700">
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-camera-rotate"></i>
      </button>
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-magnifying-glass-plus"></i>
      </button>
      <button class="mx-1 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-500 focus:outline-none">
        <i class="fas fa-info-circle"></i>
      </button>
    </div>
  </div>
</div>

360°查看组件

一个采用材料设计原则设计的简单 360° 观看组件，使用生动的颜色和暗主题支持，适合用于作品展示。

打开预览

                <div class="flex flex-col items-center justify-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out">
  <h1 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">360° Viewer Component</h1>
  <div class="relative w-full h-80 overflow-hidden rounded-lg shadow-md">
    <img src="https://picsum.photos/seed/viewer1/400/300" alt="360° View" class="w-full h-full object-cover transition-transform duration-700 ease-in-out" />
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
      <span class="text-white text-lg">Swipe to view</span>
    </div>
  </div>
  <p class="mt-4 text-gray-700 dark:text-gray-300">Showcase your work or products beautifully.</p>
  <div class="flex space-x-4 mt-6">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-lg dark:border-gray-800" />
  </div>
</div>

360° 观看组件

一个具有玻璃质感风格的360°查看器组件，具有磨砂玻璃般的半透明元素和模糊效果，支持响应式设计和暗黑主题。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative w-full max-w-lg overflow-hidden rounded-lg shadow-lg backdrop-blur-md glassmorphism">
        <div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30"></div>
        <div class="p-5 relative z-10">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Viewer</h2>
            <div class="mt-4">
                <img src="https://picsum.photos/600/400?random=1" alt="360° view" class="w-full h-auto rounded-lg border-4 border-white dark:border-gray-700" />
            </div>
            <div class="mt-4 flex space-x-4 justify-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-700" />
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-700" />
            </div>
            <div class="mt-4 text-center">
                <button class="px-4 py-2 font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600">Rotate Left</button>
                <button class="px-4 py-2 font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600">Rotate Right</button>
            </div>
        </div>
    </div>
</div>

<style>
    .glassmorphism {
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        border-radius: 10px;
    }
</style>

360° 观看组件

一个野性主义风格的360°查看器组件，以原始而大胆的设计展示旋转图像，具有响应效果和暗黑主题支持，使用Tailwind CSS。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white p-4">
    <h1 class="text-4xl font-bold mb-4">360° Viewer</h1>
    <div class="relative w-full max-w-3xl h-96 bg-gray-800 border-4 border-white rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/800/600" alt="360° view" class="absolute inset-0 w-full h-full object-cover transform transition-transform duration-700 ease-in-out hover:rotate-12 hover:scale-105"/>
        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4">
            <h2 class="text-2xl font-semibold">View from all angles</h2>
            <p class="text-sm">Hover to rotate the view</p>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white" />
        <p class="mt-2">Created by: John Doe</p>
    </div>
</div>

360° 查看组件

一个以3D风格设计的响应式360°查看组件，支持暗主题，使用来自picsum.photos的占位符图像。

打开预览

                <div class="flex flex-col items-center justify-center bg-gray-800 p-6 rounded-lg shadow-lg md:flex-row md:space-x-8">
    <div class="w-full md:w-1/2 transform perspective-1000">
        <div class="relative w-full h-64 rounded overflow-hidden shadow-2xl">
            <img src="https://picsum.photos/500/400/?random" alt="360 view" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-in-out hover:rotate-y-360" />
        </div>
    </div>
    <div class="flex flex-col justify-center mt-4 md:mt-0">
        <h2 class="text-white text-xl font-bold mb-2">Explore the 360° View</h2>
        <p class="text-gray-400">Experience an immersive 3D view of the product. Move your cursor around to get a complete view.</p>
        <div class="mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
            <p class="text-white text-sm">Uploaded by John Doe</p>
        </div>
    </div>
</div>
<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 { background-color: #2d3748; }
        .text-gray-400 { color: #cbd5e0; }
        .border-gray-600 { border-color: #4a5568; }
    }

    /* 360° Rotation Effect */
    @keyframes rotate {
        from { transform: rotateY(0deg); }
        to { transform: rotateY(360deg); }
    }

    .hover\:rotate-y-360:hover {
        animation: rotate 2s infinite;
    }
</style>

360度查看组件

一个使用Tailwind CSS的360°查看器组件，具有新拟态设计、响应效果和黑暗主题支持。它具有微妙的阴影和圆角的容器、图像占位符和带有新拟态效果的导航箭头。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="w-64 h-64 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center">
      <!-- Placeholder for 360 image -->
      <img src="https://picsum.photos/600/400?random=1" alt="360 viewer placeholder" class="rounded-lg">
    </div>
    <div class="absolute inset-x-0 bottom-4 flex justify-between px-4">
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #343434;
  }
</style>

360 观看器组件

一个支持暗模式和响应式设计的360°查看器组件，使用Tailwind CSS构建。不需要JavaScript，仅使用CSS进行样式和响应。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="container px-4">
    <div class="relative w-full max-w-lg mx-auto">
      </div>
    </div>
  </div>

复古360度查看器

复古的 360° 查看组件，具有响应效果和使用 Tailwind CSS 的暗主题支持。使用来自 picsum.photos 的占位符图像。

打开预览

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg">
  <div class="relative" style="padding-top: 56.25%;">
    <img src="https://picsum.photos/600/400" alt="360 degree view" class="absolute top-0 left-0 w-full h-full object-cover rounded-lg">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-2 px-4 rounded-full text-sm font-bold">
        Retro 360° Viewer
      </div>
    </div>
  </div>
  <div class="flex justify-center space-x-4 mt-4">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
      &lt; Previous
    </button>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-xs">
      Next &gt;
    </button>
  </div>
</div>

360° 查看器组件

一个使用Tailwind CSS的360°查看器组件，具有响应式设计和暗主题支持。使用CSS进行动画和交互，以营造微交互的感觉。不使用JavaScript。

打开预览

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="relative w-64 h-64">
    <div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 ease-in-out hover:rotate-180" style="background-image: url('https://picsum.photos/id/237/256/256');"></div>
    <div class="absolute inset-0 flex justify-center items-center opacity-0 hover:opacity-100 transition-opacity duration-300">
      <div class="text-white text-xl font-bold">View 360</div>
    </div>
  </div>
</div>

360° 查看器组件

一个具备拟物化设计的 360° 观察组件，使用 Tailwind CSS，支持响应效果和暗黑主题。

打开预览

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">360° Viewer</h2>
        <div class="relative w-full h-64 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-full object-cover rotate-360" />
            <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
                <div class="p-2 bg-gray-300 dark:bg-gray-600 rounded-full shadow-lg">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-md" />
                </div>
            </div>
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Interact with the 360° view to explore the surroundings.</p>
        </div>
    </div>
</div>

类别