组件 跳至内容链接 跳至内容链接组件

跳至内容链接组件

一个中构的“跳到内容”链接组件,用于技术/SaaS 应用程序中的可访问性,具有紫色/紫色配色方案和完全响应能力,支持深色模式。

预览

HTML 代码

<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a148c,
                -6px -6px 12px #9c27b0;
  }
</style>

相关组件

跳至内容链接 - 复古单色

跳过内容链接组件,具有复古/怀旧设计,单色调色方案和简单复杂性。

打开

跳转到内容链接组件 - 立体感灰度

一个简单、响应式的 “跳到内容” 链接,带有灰度的拟物化设计,用于博客内容。包括深色模式支持。

打开

跳至内容链接组件

一个视觉上吸引人的 3D 风格 Skip to Content 链接,可帮助用户绕过社交媒体界面上的导航菜单。该组件使用互补配色方案(蓝色和橙色),并通过阴影和变换实现 3D 效果。具有响应式设计和深色主题支持。该链接在聚焦或激活时固定在视区的左上角,使其易于键盘导航,同时在不使用时保持不显眼。

打开