div+css实现可拖拽伸缩面板ui布局效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现可拖拽伸缩面板ui布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --aspect-ratio: 16 / 10; --min-height: 5.5rem; --gap: 2rem; --frame: hsl(0 0% 25%); } body { display: grid; place-items: center; min-height: 100vh; background: black; font-family: "Geist Sans", sans-serif; font-weight: 80; } .panels { container-type: size; width: 90vmin; aspect-ratio: var(--aspect-ratio); display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 12px; gap: var(--gap); } .panel { min-height: var(--min-height); } .panel:first-of-type { position: relative; } .time { grid-column: 1 / 2; } .event { grid-column: span 7; grid-row: span 2; } /* .resizer { position: relative; top: 0; right: 0; height: 100%; width: 100%; resize: horizontal; overflow: hidden; max-width: calc(100cqi - 100px); min-width: 100px; transform-origin: 100% 100%; scale: 40; translate: 24px 0; background: green; clip-path: inset(0 0 0 calc(100% - 1px)); } */ .resizer { position: relative; right: 50%; bottom: 0; height: 12rem; width: 100%; resize: vertical; overflow: hidden; min-height: var(--min-height); max-height: calc(100cqh - (var(--gap) + var(--min-height))); transform-origin: 100% 100%; scale: 4 1; translate: 28px 1.5rem; background: green; z-index: 9999; -webkit-clip-path: inset(calc(100% - 14px) 0 0 calc(100% - 14px)); clip-path: inset(calc.........完整代码请登录后点击上方下载按钮下载查看
网友评论0