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

跳转到内容链接

响应式“跳到内容”链接组件,采用 Glassmorphism 设置样式,实现互补配色方案、适度复杂性和深色模式支持,适用于商业/公司网站。此组件完全使用 Tailwind CSS 类在 HTML 中实现,不需要 JavaScript。

预览

HTML 代码

<a href="#content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:rounded-md focus:text-white focus:bg-black focus:bg-opacity-30 focus:backdrop-filter focus:backdrop-blur-lg focus:shadow-lg dark:focus:text-black dark:focus:bg-white dark:focus:bg-opacity-30 dark:focus:backdrop-filter dark:focus:backdrop-blur-lg dark:focus:shadow-lg">Skip to content</a>

相关组件

跳到内容链接组件

一个设计有拟物化元素类似于物理按钮的跳转到内容链接组件。该组件将采用柔和的色彩方案,适中的复杂性,包括悬停效果,并支持黑暗主题。

打开

跳至内容链接

用于辅助功能的“跳至内容”链接组件,专为具有灰度配色方案的深色模式仪表板而设计。由于响应式和深色模式样式,它比较复杂。不使用 JavaScript。使用带有 dark: 前缀的 Tailwind CSS 来支持深色主题。

打开

跳过内容链接组件

提供3D样式的“跳到内容”链接的网页组件,具有响应效果和深色主题支持,使用Tailwind CSS。

打开