css布局实现50/50自适应滚动容器效果代码-html代码-BFW代码库

css布局实现50/50自适应滚动容器效果代码

代码语言：html

所属分类：响应式

代码描述：css布局实现50/50自适应滚动容器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
<style>
* {
  box-sizing: border-box;
}

:root {
  color-scheme: light dark;

  --h: 330;
  --s: 88%;
  --l: 66%;
  --brand-color-bg: hsl(var(--h) var(--s) var(--l));
  --brand-color-fg: hsl(0 0% 99%);
  --border: 1px solid var(--brand-color-bg);
  --shadow-blur: 1.5rem;
  --shadow-color: hsla(var(--h) var(--s) var(--l) / 0.6);
  --shadow-y: 1rem;
  ---shadow-y: calc(var(--shadow-y) * -1);
  --space: clamp(1.125rem, 0.8rem + 1.3cqi, 1.875rem);
  --gradient: linear-gradient(
    165deg,
    transparent 50%,
    hsla(var(--h) var(--s) var(--l) / 0.15) 125%
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --l: 46%;
  }
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
  font-size: clamp(1rem, 0.6rem + 1.125cqi, 1.125rem);
  line-height: 1.5;
  padding: 2rem;
}

h2 {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

button {
  font: inherit;
  line-height: normal;
  padding: 0.5rem 1.5rem 0.6rem;
  background: var(--brand-color-bg);
  color: var(--brand-color-fg);
  border: unset;
  border-radius: 0.25rem;
}

button:active {
  translate: 0 1px;
}

.flow > * + * {
  -webkit-margin-before: var(--space);
          margin-block-start: var(--space);
}

.container {
  display: grid;
  border: var(--border);
  border-radius: 1rem;
  inline-size: min(55rem, 100%);
}

.intro {
  padding: var(--space);
  background-image: var(--gradient);
}

.details {
  display: grid;
  grid-template-rows: auto 1fr auto;
  -webkit-border-before: var(--border);
          border-block-start: var(--border);
}

.details :where(header, footer) {
  padding: calc(var(--space) / 2) var(--space);
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  background-image: var(--gradient);
}

.scroll-container {
  position: relative;
  border-block: var(--border);
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  min-block-size: 12rem;
  scrollbar-color: var(--brand-color-bg) transparent;
  -webkit-animation: scroll-shadow-inset linear;
          animation: scroll-shadow-inset linear;
  animation-timeline: scroll(self);
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--space);
}

@-webkit-keyframes scroll-shadow-inset {
  from {
    box-shadow: inset 0 var(---shadow-y) var(--shadow-blur) var(---shadow-y)
      var(--shadow-.........完整代码请登录后点击上方下载按钮下载查看