css+js模拟windows9x电脑桌面操作效果代码
代码语言:html
所属分类:其他
代码描述:css+js模拟windows9x电脑桌面操作效果代码,包括图标操作、开始菜单栏等。
代码标签: css js 模拟 windows 9x 桌面 操作
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; box-sizing: border-box; background-color: #54A8A8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 12px; width: 100%; height: 100%; overflow: hidden; } *, *::before, *::after { box-sizing: inherit; } svg { display: block; } .desktop { display: grid; user-select: none; position: relative; width: 100%; height: 100%; } .short-cuts { margin-bottom: 28px; } .short-cut { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 2px; width: 72px; } .short-cut .icon { margin-bottom: 6px; } .short-cut .text { text-align: center; color: #FFFFFF; border: 1px solid transparent; } .short-cut.selected .text { background-color: #0000A8; border: 1px dotted #FCFC00; } .window { position: absolute; border-top: 1px solid #DFDFDF; border-left: 1px solid #DFDFDF; border-bottom: 1px solid #000000; border-right: 1px solid #000000; } .window.minimized { display: none; } .window .restore-icon { display: none; } .window.maximized { top: 0 !important; left: 0 !important; width: 100% !important; height: calc(100% - 28px) !important; border-top: 0; border-left: 0; border-bottom: 0; border-right: 0; } .window.maximized .frame { border-top: 0; border-left: 0; border-bottom: 0; border-right: 0; padding: 0; } .window.maximized .maximize-icon { display: none; } .window.maximized .restore-icon { display: block; } .window .frame { background: #BFBFBF; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #7F7F7F; border-right: 1px solid #7F7F7F; padding: 2px; width: 100%; height: 100%; display: flex; flex-direction: column; } .window .content-bevel { border-top: 1px solid #7F7F7F; border-left: 1px solid #7F7F7F; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; flex-grow: 1; height: calc(100% - 20px); } .window .content { border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #DFDFDF; border-right: 1px solid #DFDFDF; background-color: #FFFFFF; height: 100%; padding: 0 8px; overflow: auto; } .window.active .title-bar { background-color: #0000A8; } .window.active .title-bar .title { color: #FFFFFF; } .window .grab { position: absolute; } .window .n-grab { top: -1px; left: 3px; right: 3px; height: 4px; cursor: ns-resize; } .window .ne-grab { top: -1px; right: -1px; width: 4px; height: 4px; cursor: nesw-resize; } .window .e-grab { top: 3px; right: -1px; bottom: 3px; width: 4px; cursor: ew-resize; } .window .se-grab { bottom: -1px; right: -1px; width: 4px; height: 4px; cursor: nwse-resize; } .window .s-grab { bottom: -1px; left: 3px; right: 3px; height: 4px; cursor: ns-resize; } .window .sw-grab { bottom: -1px; left: -1px; width: 4px; height: 4px; cursor: nesw-resize; } .window .w-grab { left: -1px; top: 3px; bottom: 3px; width: 4px; cursor: ew-resize; } .window .nw-grab { top: -1px; left: -1px; width: 4px; height: 4px; cursor: nwse-resize; } .title-bar { background-color: #7F7F7F; padding: 1px 2px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; } .title-bar .title { margin-left: 3px; flex-grow: 1; color: #BFBFBF; font-weight: bold; } .title-bar .button { padding: 0; background: #BFBFBF; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #000000; border-right: 1px solid #000000; } .title-bar .button .bevel { border-top: 1px solid #DFDFDF; border-left: 1px solid #DFDFDF; border-bottom: 1px solid #7F7F7F; border-right: 1px solid #7F7F7F; } .title-bar .button.close { margin-left: 2px; } .title-bar .button:active { border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } .title-bar .button:active svg { position: relative; top: 1px; left: 1px; } .title-bar .button:active .bevel { border-top: 1px solid #7F7F7F; border-left: 1px solid #7F7F7F; border-bottom: 1px solid #BFBFBF; border-right: 1px solid #BFBFBF; } .title-bar.animating { position: absolute; transition: all 200ms linear; background-color: #0000A8; z-index: 1000; } .title-bar.animating .title { color: #FFFFFF; } .title-bar.animating .button { display: none; } .task-bar { position: absolute; bottom: 0; left: 0; right: 0; background-color: #C0C7C8; height: 28px; border-top: 1px solid #C0C7C8; z-index: 1000; } .task-bar > .bevel { border-top: 1px solid #FFFFFF; padding: 2px; display: flex; } .task-bar .start-button { border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #000000; border-right: 1px solid #000000; background-color: #C0C7C8; display: flex; padding: 0; font-size: 11px; } .task-bar .start-button .bevel { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #87888F; border-right: 1px solid #87888F; background-color: #C0C7C8; padding: 2px 3px 3px 3px; } .task-bar .start-button .icon { margin-right: 3px; } .task-bar .start-button.active { border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } .task-bar .start-button.active .bevel { border-top: 1px solid #87888F; border-left: 1px solid #87888F; padding: 2px 2px 2px 3px; } .task-bar .start-menu { position: absolute; bottom: 26px; left: 2px; background-color: #C0C7C8; display: flex; padding: 2px; border-top: 1px solid #C0C7C8; border-left: 1px solid #C0C7C8; border-bottom: 1px solid #000000; border-right: 1px solid #000000; } .task-bar .start-menu::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; pointer-events: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #87888F; border-right: 1px solid #87888F; } .task-bar .start-menu.hidden { display: none; } .task-bar .start-menu .side-logo { background-color: #87888F; width: 21px; min-height: 150px; } .task-bar .start-menu .side-logo .text { font-size: 20px; transform: rotate(-90deg) translate3d(-120px, -1px, 0); } .task-bar .start-menu .side-logo .windows { color: #C0C7C8; font-weight: 900; } .task-bar .start-menu .side-logo .version { color: #FFFFFF; } .task-bar .start-menu .menu ul { list-style: none; margin: 0; padding: 0; } .task-bar .start-menu .menu ul li { display: flex; justify-content: space-between; align-items: center; padding: 9px 6px; } .task-bar .start-menu .menu ul li .text { flex-grow: 1; min-width: 74px; } .task-bar .start-menu .menu ul li .icon { margin-right: 6px; } .task-bar .start-menu .menu ul li:hover { background-color: #0000A8; color: #FFFFFF; } .task-bar .start-menu .menu .underline { text-decoration: underline; } .task-bar .task-bar-items { margin-left: 1px; display: flex; justify-content: flex-start; flex-grow: 1; } .task-bar .task-bar-item { width: 157px; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #000000; border-right: 1px solid #000000; margin-left: 3px; } .task-bar .task-bar-item .bevel { height: 100%; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid #87888F; border-right: 1px solid #87888F; background-color: #C0C7C8; padding-left: 3px; } .task-bar .task-bar-item .icon { margin-right: 4px; } .task-bar .task-bar-item.active { border-top: 1px solid #000000; border-left: 1px solid #000000; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } .task-bar .task-bar-item.active .bevel { position: relative; border-top: 1px solid #87888F; border-left: 1px solid #87888F; border-bottom: 1px solid #C0C7C8; border-right: 1px solid #C0C7C8; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='none'><path fill='%23fff' d='M0 0h2v2H0z'/><path fill='%23C0C7C8' d='M0 0h1v1H0zM1 1h1v1H1z'/></svg>"); background-repeat: repeat; } .task-bar .task-bar-item.active .bevel:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; width: 100%; background-color: #FFFFFF; } .task-bar .notification-area { border-top: 1px solid #87888F; border-left: 1px solid #87888F; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; padding: 1px; } .task-bar .notification-area .clock { margin-right: 10px; min-width: 50px; text-align: right; } ::-webkit-scrollbar { width: 16px; height: 16px; } ::-webkit-scrollbar-thumb { border-top: 1px solid #C0C7C8; border-left: 1px solid #C0C7C8; border-right: 1px solid #000000; border-bottom: 1px solid #000000; box-shadow: inset -1px -1px 0 0 #87888F, inset 1px 1px 0 0 #FFFFFF; width: 16px; height: 16px; background-color: #C0C7C8; z-index: 1; } ::-webkit-scrollbar-track { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2' height='2' fill='none'><path fill='%23fff' d='M0 0h2v2H0z'/><path fill='%23C0C7C8' d='M0 0h1v1H0zM1 1h1v1H1z'/></svg>"); background-repeat: repeat; } ::-webkit-scrollbar-corner { background-color: #C0C7C8; } ::-webkit-scrollbar-button { border-top: 1px solid #C0C7C8; border-left: 1px solid #C0C7C8; border-right: 1px solid #000000; border-bottom: 1px solid #000000; box-shadow: inset -1px -1px 0 0 #87888F, inset 1px 1px 0 0 #FFFFFF; display: block; width: 16px; height: 16px; background-color: #C0C7C8; background-repeat: no-repeat; } ::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path fill='%23000' d='M4 6v1h1v1h1v1h1v1h1V3H7v1H6v1H5v1H4Z'/></svg>"); } ::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path fill='%23000' d='M9 7V6H8V5H7V4H6V3H5v7h1V9h1V8h1V7h1Z'/></svg>"); } ::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path fill='%23000' d='M7 5H6v1H5v1H4v1H3v1h7V8H9V7H8V6H7V5Z'/></svg>"); } ::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'><path fill='%23000' d='M6 9h1V8h1V7h1V6h1V5H3v1h1v1h1v1h1v1Z'/></svg>"); } ::-webkit-scrollbar-button:active { border-top: 1px solid #87888F; border-left: 1px solid #87888F; border-bottom: 1px solid #87888F; border-right: 1px solid #87888F; box-shadow: none; background-position: 1px 1px; } ::-webkit-scrollbar-button:horizontal:increment:start { display: none; } ::-webkit-scrollbar-button:horizontal:decrement:end { display: none; } ::-webkit-scrollbar-button:vertical:increment:start { display: none; } ::-webkit-scrollbar-button:vertical:decrement:end { display: none; } </style> </head> <body > <svg style="display:none" version="2.0"> <defs> <symbol id="windows-icon-16" viewBox="0 0 16 14" fill="none"><path fill="red" d="M3 6H2v2h4V6H4v1H3V6Z"/><path fill="#00F" d="M3 9H2v2h4V9H4v1H3V9Z"/><path fill="#000" d="M0 2h1v2H0z"/><path fill="red" d="M0 5h1v2H0z"/><path fill="#00F" d="M0 8h1v2H0z"/><path fill="#000" d="M0 11h1v2H0zM2 5V3h1v1h1V3h2V2h1V1h2V0h4v1h2v1h1v12h-1v-1h-2v-1H9v1H7v1H2v-2h1v1h1v-1h2V5H2Z"/><path fill="red" d="M8 3v3h1V5h1V2H9v1H8Z"/><path fill="#00F" d="M8 8v3h1v-1h1V7H9v1H8Z"/><path fill="#0F0" d="M13 2h-1v3h1v1h1V3h-1V2Z"/><path fill="#FF0" d="M13 7h-1v3h1v1h1V8h-1V7Z"/></symbol> <symbol id="default-window-icon-16" viewBox="0 0 16 16" fill="none"><path fill="gray" d="M0 1h16v1H0zM2 5h12v1H2zM0 13h15v1H0zM0 2h1v11H0zM14 2h1v11h-1z"/><path fill="silver" d="M1 2h13v1H1zM1 3h1v10H1z"/><path fill="#000" d="M0 14h16v1H0zM16 2h-1v12h1z"/><path fill="#0000BF" d="M2 3h12v2H2z"/><path fill="#000" d="M8 4h6v1H8z"/><path fill="#fff" d="M8 4h1v1H8zM10 4h1v1h-1zM12 4h1v1h-1zM2 6h12v7H2z"/></symbol> <symbol id="default-window-icon-32" viewBox="0 0 32 32" fill="none"><path fill="#000" d="M0 30h32v1H0zM31 2h1v28h-1z"/><path fill="gray" d="M0 2h31v1H0zM2 9h27v1H2zM2 10h1v18H2zM0 29h31v1H0zM0 3h1v26H0zM30 3h1v26h-1z"/><path fill="silver" d="M2 3h28v1H2zM2 8h28v1H2zM2 28h28v1H2zM1 3h1v26H1z"/><path fill="silver" d="M29 8h1v20h-1z"/><path fill="#0000BF" d="M2 4h28v4H2z"/><path fill="#000" d="M21 5h9v3h-9z"/><path fill="silver" d="M21 5h2v2h-2zM24 5h2v2h-2zM27 5h2v2h-2z"/><path fill="#fff" d="M3 10h26v18H3z"/></symbol> <symbol id="minimize-icon" viewBox="0 0 12 10" fill="none"><path fill="#000" d="M2 6h6v2H2z"/></symbol> <symbol id="maximize-icon" viewBox="0 0 12 10" fill="none"><path fill="#000" fill-rule="evenodd" d="M10 0H1v9h9V0ZM9 2H2v6h7V2Z" clip-rule="evenodd"/></symbol> <symbol id="restore-icon" viewBox="0 0 12 10" fill="none"><path fill="#000" fill-rule="evenodd" d="M2 3v6h6V6h2V0H4v3H2Zm3 0V2h4v3H8V3H5ZM3 8V5h4v3H3Z" clip-rule="evenodd"/></symbol> <symbol id="close-icon" viewBox="0 0 12 10" fill="none"><path d="M2 2V1H4V2H5V3H7V2H8V1H10V2H9V3H8V4H7V5H8V6H9V7H10V8H8V7H7V6H5V7H4V8H2V7H3V6H4V5H5V4H4V3H3V2H2Z" fill="black"/></symbol> <symbol id="programs-icon" viewBox="0 0 24 24" fill="none"><path fill="#D9D9D9" d="M6 8h17v15H6z"/><path fill="#87888F" d="M0 2v13h1V3h17V2h-7V1h-1V0H2v1H1v1H0Z"/><path fill="#fff" d="M1 2v13h1V4h16V3h-7V2h-1V1H2v1H1Z"/><path fill="#FF0" d="M3 1h7v1H3z"/><path fill="#C0C7C8" d="M1 2h10v1H1zM2 4h16v11H2z"/><path fill="#FF0" d="M2 4h1v1H2zM3 5h1v1H3zM7 5h1v1H7zM11 5h1v1h-1zM15 5h1v1h-1zM5 5h1v1H5zM9 5h1v1H9zM14 5h-1v1h1zM18 5h-1v1h1zM3 7h1v1H3zM3 9h1v1H3zM3 11h1v1H3zM3 13h1v1H3zM2 6h1v1H2zM2 8h1v1H2zM2 10h1v1H2zM2 12h1v1H2zM2 14h1v1H2zM4 4h1v1H4zM8 4h1v1H8zM12 4h1v1h-1zM6 4h1v1H6zM10 4h1v1h-1zM14 4h1v1h-1z"/><path fill="#FF0" d="M13 4h-1v1h1zM17 4h-1v1h1zM4 6h1v1H4zM8 6h1v1H8zM12 6h1v1h-1zM6 6h1v1H6zM10 6h1v1h-1zM14 6h1v1h-1z"/><path fill="#FF0" d="M13 6h-1v1h1zM17 6h-1v1h1zM4 8h1v1H4zM4 10h1v1H4zM4 12h1v1H4zM4 14h1v1H4z"/><path fill="#000" d="M5 7h19v17H5z"/><path fill="#87888F" d="M5 7h18v16H5z"/><path fill="#C0C7C8" d="M6 8h17v15H6z"/><path fill="#0000A8" d="M7 9h9v2H7z"/><path fill="#000" d="M16 9h6v2h-6z"/><path fill="#fff" d="M16 9h1v1h-1zM18 9h1v1h-1zM20 9h1v1h-1zM7 12h15v10H7z"/><path fill="#87888F" d="M8 19h3v1H8zM13 19h3v1h-3zM18 19h3v1h-3z"/><path fill="#A80057" d="M8 15v2h1v1h1v-1h1v-3H9v1H8Z"/><path fill="red" d="M9 14h1v3H9v-1H8v-1h1v-1Z"/><path fill="#FF0" d="M9 15h1v1H9z"/><path fill="#C0C7C8" d="M8 17h1v1H8z"/><path fill="#A857A8" d="M12 17h4v1h-4z"/><path fill="#C0C7C8" d="M13 17h1v1h-1z"/><path fill="#00F" d="M13 17v-3h1v1h2v1h-1v1h-2Z"/><path fill="#0FF" d="M13 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0