open-props实现模糊背景自适应弹出模态层对话框代码
代码语言:html
所属分类:弹出层
代码描述:open-props实现模糊背景自适应弹出模态层对话框代码
代码标签: open-props 模糊 背景 自适应 弹出 对话框 代码 模态 层
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import '//repo.bfw.wiki/bfwrepo/css/open-props.1.6.17.css' layer(design.system); @import '//repo.bfw.wiki/bfwrepo/css/open-props.normalize.light.min.css' layer(base.normalize); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900&display=swap'); /* Source code of these utilities: https://github.com/mobalti/layout-craft/blob/main/lib/utilities.css */ @import '//repo.bfw.wiki/bfwrepo/css/layout-craft.utilities.css' layer(base.utilities); /* More about these new CSS features at: https://developer.chrome.com/blog/entry-exit-animations */ @layer animation.dialog { dialog[open] { opacity: 1; transform: scale(1); } dialog { opacity: 0; transform: scale(0); transition: opacity 0.7s ease-out, transform 0.7s var(--ease-spring-1), overlay 0.7s ease-out allow-discrete, display 0.7s var(--ease-spring-1) allow-discrete; } @starting-style { dialog[open] { opacity: 0; transform: scale(0); } } dialog::backdrop { background-color: hsl(0 0 0 / 0%); transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete, background-color 0.7s; } dialog[open]::backdrop { background-color: hsl(0 0 0 / 25%); } @starting-style { dialog[open]::backdrop { background-color: hsl(0 0 0 / 0%); } } } @layer base.override-normalize { :root { font-family: 'Inter', sans-serif; } } @layer base.demo { section { block-size: 100dvb; overflow: hidden; } dialog { background-color: hsl(349, 99%, 58%); position: relative; color: white; border-radius: var(--radius-2); padding: var(--size-4); } .Promo { position: relative; padding: var(--size-4); padding-block: var(--size-8); } .Wrapper { @media (width < 800px) { grid-auto-flow: row; .Visual { inline-size: 100%; } } } p { font-size: var(--font-size-6); font-weight: var(--font-weight-7); max-inline-size: 12ch; line-height: var(--font-lineheight-1); @media (width < 360px) { font-size: var(--font-size-4); } } small { font-size: var(--font-size-1); font-weight: var(--font-weight-7); text-decoration: underline; text-decoration-thickness: var(--border-size-2); text-underline-offset: 0.2ex; } .Visual { block-size: 272px; inline-size: 272px; } :is(img, picture) { inline-size: 100%; block-size: 100%; } img { object-fit: cover; object-position: top; background: var(--stone-2); } .ButtonClose { position: fixed; inset-block-start: var(--si.........完整代码请登录后点击上方下载按钮下载查看
网友评论0