360° 观察者组件

一个极简且响应式的 360° 查看器组件，使用 Tailwind CSS，支持深色模式。

预览

HTML 代码

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden p-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/700/400?random=1" alt="360° View" class="rounded-lg transition-transform duration-500 ease-in-out hover:scale-105">
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-2">Experience the object in 360° view. Hover to zoom in.</p>
    <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Learn more about this view</a>
</div>

相关组件

360_viewer_component_sports_grayscale

一个简单、响应迅速的 360° 查看器组件，适用于运动/健身应用，具有水彩/艺术风格、灰度配色方案和深色模式支持。

打开

拟态360查看器组件

一个360°的查看器组件，采用拟物设计，三原色配色方案（例如：浅蓝色、粉色、黄橙色），适用于社交媒体应用，复杂度适中。该组件是响应式的，支持使用Tailwind类的暗黑模式，并使用picsum.photos作为图片和randomuser.me作为头像。不需要JavaScript。

打开

360_viewer_component

一个复杂、响应迅速的 360° 查看器组件，具有赛博朋克和秋天的色彩美感，专为教育平台而设计。它具有深色模式支持、交互式元素和丰富的排版。

打开