拟态风格设计系统

体验现代拟态设计风格，柔和的阴影和高光效果创造立体感

设计原则

柔和阴影

使用相近颜色的阴影和高光创造立体感

统一配色

背景与元素颜色相近，保持视觉和谐

交互反馈

通过阴影变化提供清晰的交互反馈

颜色系统

背景色

#e0e5ec

阴影色 1

#b8bec7

阴影色 2

#ffffff

主色调

#165DFF

拟态按钮

拟态输入框

拟态卡片

卡片 1

这是一个拟态风格的卡片示例

卡片 2

另一个拟态风格的卡片

拟态图标和按钮

拟态选择组件

开关选项

复选框选项 1

复选框选项 2

单选按钮 1

单选按钮 2

其他组件

进度 75%

拟态容器

容器标题

这是一个拟态风格的容器，使用柔和的阴影和高光效果创造立体感

暗色模式

点击顶部导航栏的按钮可切换主题

暗色模式卡片

暗色模式使用更深的背景色和调整后的阴影效果

高级组件

00:00:00

高级拟态组件

计数器

选项卡

首页

关于

联系

下拉菜单

搜索框

通知

操作成功完成！

滑动开关

仪表盘

加载器

使用指南

HTML 结构

<!-- 拟态按钮 -->
<button class="neumorphic-button">
  按钮文本
</button>

<!-- 拟态卡片 -->
<div class="neumorphic-card">
  <h3>标题</h3>
  <p>内容</p>
</div>

<!-- 拟态时钟 -->
<div class="neumorphic-clock">
  <div class="clock-marks" id="clock-marks"></div>
  <div class="clock-hand hour-hand" id="hour-hand"></div>
  <div class="clock-hand minute-hand" id="minute-hand"></div>
  <div class="clock-hand second-hand" id="second-hand"></div>
  <div class="clock-center"></div>
</div>

<!-- 拟态计数器 -->
<div class="neumorphic-counter">
  <button class="neumorphic-counter-btn">-</button>
  <div class="neumorphic-counter-value">0</div>
  <button class="neumorphic-counter-btn">+</button>
</div>

CSS 类名

按钮 .neumorphic-button
卡片 .neumorphic-card
输入框 .neumorphic-input
图标 .neumorphic-icon
反转样式 .reverse
时钟 .neumorphic-clock
数字显示 .neumorphic-display
计数器 .neumorphic-counter
选项卡 .neumorphic-tabs
下拉菜单 .neumorphic-dropdown

JavaScript 功能

交互式组件

<script>
// 计数器功能
function initCounter() {
    const counterValue = document.getElementById('counterValue-demo');
    const incrementBtn = document.getElementById('increment-demo');
    const decrementBtn = document.getElementById('decrement-demo');
    let count = 0;
    
    if(incrementBtn && decrementBtn && counterValue) {
        incrementBtn.addEventListener('click', () => {
            count++;
            counterValue.textContent = count;
        });
        
        decrementBtn.addEventListener('click', () => {
            count--;
            counterValue.textContent = count;
        });
    }
}

// 选项卡功能
function initTabs() {
    const tabs = document.querySelectorAll('.neumorphic-tab');
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
        });
    });
}

// 下拉菜单功能
function initDropdown() {
    const dropdownBtn = document.querySelector('.neumorphic-dropdown-btn');
    const dropdownContent = document.querySelector('.neumorphic-dropdown-content');
    
    if(dropdownBtn && dropdownContent) {
        dropdownBtn.addEventListener('click', () => {
            dropdownContent.classList.toggle('show');
        });
        
        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', (e) => {
            if (!dropdownBtn.contains(e.target)) {
                dropdownContent.classList.remove('show');
            }
        });
    }
}

// 通知关闭功能
function initNotification() {
    const notificationClose = document.querySelector('.neumorphic-notification-close');
    if(notificationClose) {
        notificationClose.addEventListener('click', () => {
            const notification = notificationClose.closest('.neumorphic-notification');
            if(notification) notification.style.display = 'none';
        });
    }
}

// 初始化所有功能
document.addEventListener('DOMContentLoaded', function() {
    initCounter();
    initTabs();
    initDropdown();
    initNotification();
});
</script>