原生js+css的模仿mac操作系统的web系统ui交互代码-html代码-BFW代码库

原生js+css的模仿mac操作系统的web系统ui交互代码

代码语言：html

代码描述：gemini3生成原生js+css的模仿mac操作系统的web系统ui交互代码

代码标签： gemin 原生 js css 模仿 mac 操作系统 web ui 交互代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>macOS Web Simulation</title>
    <!-- 引入 FontAwesome 图标库 -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    <style>
        /* ================== 全局样式 ================== */
        :root {
            --bg-image: url('//repo.bfw.wiki/bfwrepo/image/5df86dc72ff0f.png'); /* macOS Big Sur/Monterey style */
            --dock-bg: rgba(255, 255, 255, 0.2);
            --menu-bg: rgba(255, 255, 255, 0.4);
            --window-bg: #ffffff;
            --glass-blur: blur(15px);
            --shadow-lg: 0 20px 50px rgba(0,0,0,0.3);
            --system-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        * { box-sizing: border-box; user-select: none; }
        
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            font-family: var(--system-font);
            background: var(--bg-image) no-repeat center center/cover;
        }

        /* ================== 顶部菜单栏 ================== */
        .menubar {
            position: fixed;
            top: 0;
            width: 100%;
            height: 30px;
            background: var(--menu-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            font-size: 14px;
            color: #000;
            font-weight: 500;
            z-index: 9999;
            box-shadow: 0 1px 5px rgba(0,0,0,0.05);
        }

        .menubar-left, .menubar-right { display: flex; gap: 20px; align-items: center; }
        .apple-logo { font-size: 16px; }
        .app-name { font-weight: 700; }
        
        /* ================== 桌面区域 ================== */
        .desktop {
            width: 100%;
            height: 100%;
            position: relative;
        }

        /* ================== 窗口系统 ================== */
        .window {
            position: absolute;
            background: var(--window-bg);
            border-radius: 10px;
            box-shadow: var(--shadow-lg);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.2s, transform 0.2s, width 0.2s, height 0.2s;
            display: none; /* 默认隐藏 */
        }

        .window.active {
            display: flex;
            opacity: 1;
            transform: scale(1);
        }

        .window.minimized {
            opacity: 0;
            transform: scale(0) translateY(100%);
            pointer-events: none;
        }

        /* 窗口标题栏 */
        .title-bar {
            height: 38px;
            background: #f3f3f3;
            display: flex;
            align-items: center;
            padding: 0 15px;
            border-bottom: 1px solid #ccc;
            cursor: default; /* 稍后JS会覆盖为 move */
        }

        .traffic-lights {
            display: flex;
            gap: 8px;
        }

        .light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 8px;
            color: rgba(0,0,0,0.5);
            opacity: 1;
        }
        
        .light:hover span { display: block; }
        .light span { display: none; }

        .close { background: #ff5f56; border: 1px solid #e0443e; }
        .minimize { background: #ffbd2e; border: 1px solid #dea123; }
        .maximize { background: #27c93f; border: 1px solid #1aab29; }

        .window-title {
            flex-grow: 1;
            text-align: center;
            color: #555;
            .........完整代码请登录后点击上方下载按钮下载查看