css布局实现写代码的电脑桌窗外景色效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现写代码的电脑桌窗外景色效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #131b33; min-height: 100vh; display: flex; justify-content: center; align-items: flex-end; padding-top: 3rem; } .wrapper { display: flex; flex-direction: column; align-items: center; position: relative; } .window { border: 8px solid #232b43; width: 25rem; height: 18rem; display: grid; grid-template-columns: repeat(3, 1fr); } .window > div { overflow: hidden; background-color: #7b83e3; position: relative; } .window > div:first-child { border: 2px solid #8babfb; border-top: 0; border-bottom: 0; } .window > div:not(:first-child) { border-left: 6px solid #232b43; } .window__inner-1 { margin-top: 45%; height: 80%; border-top: 8px solid #53639b; background-color: #636bb3; position: relative; } .window__inner-1::after, .window__inner-1::before { content: ""; position: absolute; left: 0.5rem; top: 0; width: 3rem; height: 1.6rem; transform: translateY(-100%); background-color: #53639b; } .window__inner-1::before { left: 4rem; width: 3.2rem; height: 2rem; transform: translateY(-100%); background-color: #53639b; } .window__inner-1 .bottom-right { position: absolute; right: 0; width: 1rem; } .window__inner-1 .bottom-right--1 { top: 60%; background-color: #4b5393; border-top: 2px solid #3b4373; height: 0.5rem; } .window__inner-1 .bottom-right--2 { height: 3.1rem; bottom: 0; background-color: #4b5393; } .window__inner-1 .small-window { position: absolute; width: 80%; height: 80%; left: 10%; bottom: 0; background-color: #4b5393; } .window__inner-1 .small-window::after { content: ""; position: absolute; left: -5%; top: 0; width: 110%; height: 1rem; transform: translateY(-100%); border-radius: 4px; border-left: 2px solid #3b4373; border-bottom: 2px solid #3b4373; background-color: #53639b; } .window__inner-1 .top-square { width: 60px; height: 14px; position: absolute; top: 14px; left: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .window__inner-1 .top-square > div { background-color: #53639b; } .window__inner-1 .left-square { width: 14px; height: 20px; position: absolute; top: 30%; left: 0; background-color: #53639b; } .window__inner-2 { margin-top: 45%; height: 80%; border-top: 8px solid #53639b; background-color: #636bb3; position: relative; } .window__inner-2 .bottom-right { position: absolute; left: 0; width: 2rem; } .window__inner-2 .bottom-right--1 { top: 60.5%; background-color: #4b5393; border-top: 2px solid #3b4373; height: 0.5rem; position: relative; } .window__inner-2 .bottom-right--1::after, .window__inner-2 .bottom-right--1::before { content: ""; position: absolute; left: 0; width: 4px; height: 2rem; left: 0.2rem; background-color: #4b5393; } .window__inner-2 .bottom-right--1::after { left: 0.9rem; } .window__inner-2 .bottom-right--2 { height: 3rem; bottom: 0; background-color: #4b5393; } .window__inner-2 .big-window { position: absolute; width: 80%; height: 114%; right: 0; bottom: 0; background-color: #4b5393; padding-top: 10px; } .window__inner-2 .big-window::after { content: ""; position: absolute; left: -5%; top: 0; width: 110%; height: 1rem; transform: translateY(-100%); border-radius: 4px; border-left: 2px solid #3b4373; border-bottom: 2px solid #3b4373; background-color: #53639b; } .window__inner-3 { margin-top: 45%; width: 40%; height: 80%; background-color: #636bb3; position: relative; } .window__inner-3::after { content: ""; position: absolute; left: 0; top: 0; height: 8px; width: 110%; background-color: #53639b; } .window__inner-3 .grid { grid-template-columns: repeat(2, 1fr); padding: 3rem 0.7rem; padding-left: 2px; gap: 4px 3px; } .window__inner-3 .grid__items { width: 100%; height: 1rem; background-color: #7383db; border: none; } .skew-w { position: absolute; left: 2rem; top: -5rem; width: 2.4rem; height: 100%; opacity: 0.6; background-color: #93a3f1; transform: rotate(46deg); mix-blend-mode: screen; } .skew-w::after { content: ""; position: absolute; left: 110%; top: 1rem; height: 100%; width: 10%; background-color: inherit; mix-blend-mode: inherit; } .bottom-right--3rd { position: absolute; right: 0; bottom: 3rem; width: 90%; height: 2rem; background-color: #5363c3; clip-path: polygon(32% 0%, 100% 0, 100% 100%, 0% 100%); } .bottom-right--3rd::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: 110%; background-color: #4353b3; } .bottom-right--4rd { position: absolute; right: 0; bottom: 0; width: 75%; height: 3rem; background-color: #637bd3; } .bottom-right--4rd .grid { margin-top: 0.6rem; margin-left: 0.8rem; grid-template-columns: repeat(2, 1rem); gap: 1.5px; } .bottom-right--4rd .grid__items { height: 0.8rem; } .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); gap: 6px 8px; padding: 0 12px; } .grid__items { width: 14px; height: 1rem; background-color: #2b3353; border-left: 4px solid #3b436b; } .laptop { width: 13rem; height: 8.5rem; background-color: #3b436b; margin-left: 6rem; margin-top: -2.5rem; position: relative; border: 10px solid #2b3353; } .laptop::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(130%); width: 120%; height: 1.2rem; border-top: 4px solid #5b6bab; background-color: #3b3b63; border-radius: 0 0 1rem 1rem; } .desk-top { width: 32rem; height: 1.1rem; margin-top: 0.9rem; border-radius: 1rem; background-color: #434b7b; position: relative; overflow: hidden; } .desk-top::after { content: ""; position: absolute; left: 0; bottom: 0; background-color: #132343; width: 100%; height: 0.6rem; border-radius: 1rem; } .desk-bottom { width: 30rem; height: 10rem; background-color: #33335b; position: relative; overflow: hidden; } .desk-bottom::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 13rem; height: 4rem; background-color: #131b3b; border-radius: 2rem 2rem 0 0; } .desk-bottom::before { content: ""; position: absolute; left: 50%; top: 25%; transform: translateX(-50%); width: 3rem; height: 1rem; background-color: #131b3b; } .lamp { position: absolute; top: 43.5%; left: 5%; } .l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0