div+css实现房间主题风格ui页面布局效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现房间主题风格ui页面布局效果代码,悬浮导航菜单有立体凹凸效果,开关也是仿造房间的开关、甚至窗体都能像门一样打开。
代码标签: div css 房间 主题 风格 ui 页面 布局
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Sometype+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); :root { --bg: #fef5b9; --box: #fced97; --light: #fffbaf; --dark: #825a48; --body: #251418; --alt: #918d61; } * { box-sizing: border-box; } ::selection { background: var(--body); color: var(--bg); } html { overflow-x: hidden; } body { margin: 0; padding: 0 0 20px 0; position: relative; background: var(--bg); color: var(--body); width: 100%; min-height: 100vh; font-family: 'Sometype Mono', monospace; background-image: url("https://assets.codepen.io/5896374/seamless-yellow-carpet.jpg"); overflow-x:hidden; transition: all 0.3s steps(3); } body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; z-index: 999; opacity: 0; pointer-events: none; transition: inherit; } body.toggled::before { opacity: 0.5; mix-blend-mode: color-burn; } main { display: flex; flex-wrap: wrap; width: 1050px; margin: auto; max-width: 100%; } .box { margin: auto; max-width: 100%; display: grid; padding: 20px; position: relative; border-radius: 10px; border: 2px solid; background: var(--box); box-shadow: 5px 5px 3px inset rgba(255, 255, 255, 0.65), 5px 10px 10px 5px inset var(--light), -6px -6px 1px inset var(--dark), 3px 3px 0 rgba(0, 0, 0, 0.1), 5px 5px 0 rgba(0, 0, 0, 0.1), 7px 7px 0 rgba(0, 0, 0, 0.1), 9px 9px 0 rgba(0, 0, 0, 0.1); } .box-wrap { position: relative; } .main-box { width: 300px; min-height: 300px; max-width: 92%; margin: 20px auto; } .box::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; border-radius: inherit; pointer-events: none; } .box-inner { padding: 20px; background: var(--alt); border-radius: 3px; border: 2px solid; box-shadow: 2px 2px 5px inset rgba(0, 0, 0, 0.5), -3px -3px 5px rgba(0,0,0,0.25), 4px 4px 5px rgba(255,255,255,0.75); position: relative; z-index: 3; max-width: 100%; } .box-inner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 45deg, var(--alt) 25%, transparent 25%, transparent 75%, var(--alt) 75%, var(--alt) 0 ), linear-gradient( 45deg, var(--alt) 25%, transparent 25%, transparent 75%, var(--alt) 75%, var(--alt) 0 ), rgba(0, 0, 0, 0); background-size: 10px 10px, 10px 10px; background-position: 0px 0, 5px 5px; filter: brightness(0.8); opacity: 0.25; mix-blend-mode: multiply; } .box.toggler { height: 100%; width: 150px; } .box.frame::before { content: ""; position: absolute; top: 10px; left: 10px; width: calc(100% - 22px); height: calc(100% - 22px); border: 2px solid; border-radius: 5px; pointer-events: none; } .box-inner .box:not(.toggler) { margin-bottom: 20px; display: block; } .box-inner .box:last-of-type { margin-bottom: 0; } .toggler-inner { width: 55px; height: 110px; border: 2px solid; border-radius: 3px; margin: auto; background-image: linear-gradient(to bottom, var(--box) 0%, var(--box) 20%, var(--bg) 30%,var(--light) 60%, var(--dark) 95%); box-shadow: 0 0 3px 3px inset var(--bg),3px 3px 0 rgba(0, 0, 0, 0.1), 5px 5px 0 rgba(0, 0, 0, 0.1), 7px 7px 0 rgba(0, 0, 0, 0.1); position: relative; cursor: pointer; transition: all 0.2s steps(2); transform: perspective(400px); transform-style: preserve-3d; } .toggler-inner::before { content: ""; background: inherit; transform-style: preserve-3d; transform: perspective(500px) rotateX(35deg); position: absolute; top: calc(-12% - 2px); left: -2px; width: 100%; height: 112%; transition: inherit; border: 2px solid; border-radius: inherit; box-shadow: inherit; transition: inherit; } .toggler-inner::after { content: ""; position: absolute; top: 100%; left: -5%; height: 70%; width: calc(110% + 5px); border-radius: inherit; background: black; opacity: 0.3; filter: blur(2px); transform: skewx(20deg) translatex(25%); pointer-events: none; transition: inherit; } .toggler-inner.active::before { transform: perspective(500px) rotateX(-35deg); top: -3%; } .toggler-inner.active::after { height: 20%; transform: skewx(20deg) translatex(10%); width: 110%; } nav { width: 100%; border-top: 2px solid; margin-bottom: 20px; border-bottom: 2px solid; text-align: center; background: var(--light); position: sticky; top: 0; z-index: 9; } nav::before { content: ""; box-shadow: 5px 5px 3px inset rgba(255, 255, 255, 0.65), 5px 10px 10px 5px inset var(--light), -6px -6px 1px inset var(--dark), 3px 3px 0 rgba(0, 0, 0, 0.1), 5px 5px 0 rgba(0, 0, 0, 0.1), 7px 7px 0 rgba(0, 0, 0, 0.1), 9px 9px 0 rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: -20px; width: calc(100% + 40px); height: 100%; z-index: -1; pointer-events: none; } .nav-wrap { display: flex; width: calc(100% - 20px); max-width: 1000px; margin: 0 auto; } nav a { padding: 10px; flex-grow: 1; color: inherit; text-transform: uppercase; font-weight: bold; text-decoration: none; border-right: 2px solid; transition: all 0.15s steps(2); } nav a:first-of-type { border-left: 2px solid; } nav a:focus, nav a:hover { background: var(--light); box-shadow: -2px -2px 2px 2px inset rgba(255, 255, 255, 0.5), 2px 2px 1px 2px inset var(--dark); } nav a:focus { filter: brightness(0.9); } h1 { width: 100%; text-align: center; text-transform: uppercase; margin: 0; padding: 20px; } h2, h3, h4 { margin: 0.5em 0; } h3 { border-bottom: 2px solid; pa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0