跳至内容链接
跳到内容链接组件，具有 Neumorphism 设计样式、三元配色方案以及适用于博客和内容网站的复杂布局。它包括响应式设计和使用 Tailwind CSS 的深色模式支持。
HTML 代码
<a href="#content" class="skip-to-content-link">
Skip to Content
</a>
<style>
.skip-to-content-link {
position: absolute;
top: -40px;
left: 0;
background-color: #5a8f7b; /* One color from a triadic scheme */
color: #e0f7fa; /* Another color from a triadic scheme */
padding: 8px 12px;
z-index: 1000;
transition: all 0.3s ease-in-out;
/* Neumorphism styles */
border-radius: 10px;
box-shadow: 7px 7px 15px rgba(50, 50, 50, 0.2), -7px -7px 15px rgba(255, 255, 255, 0.7);
}
.skip-to-content-link:focus {
top: 10px;
/* Neumorphism inset effect on focus */
box-shadow: inset 5px 5px 10px rgba(50, 50, 50, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.7);
}
/* Dark mode styles */
.dark .skip-to-content-link {
background-color: #2c5f2d; /* Darker shade of the triadic color */
color: #b2ebf2; /* Lighter shade of the triadic color */
box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5), -7px -7px 15px rgba(70, 70, 70, 0.7);
}
.dark .skip-to-content-link:focus {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(70, 70, 70, 0.7);
}
@media (max-width: 768px) {
.skip-to-content-link {
padding: 6px 10px;
}
}
</style>