div+css布局香水瓶色卡排列效果代码-html代码-BFW代码库

div+css布局香水瓶色卡排列效果代码

代码语言：html

代码描述：div+css布局香水瓶色卡排列效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --ink-midnight: #1a2744;
  --ink-oxblood: #7c1e2e;
  --ink-eucalyptus: #2d5e4a;
  --ink-amber: #b5692a;
  --ink-damson: #582968;
  --ink-peacock: #1b6474;
  --ink-lampblack: #2a2a2e;
  --cream: #f5f0e3;
  --wall: #161419;
  --text-light: #c8c2b5;
  --text-mid: #9e9789;
  --text-muted: #968f82;
  --label-text: #3c2e1f;
  --label-secondary: #6b5d4a;
  --label-tertiary: #8a7b66;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wall);
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--cream);
  overflow-x: hidden;
}

.scene {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(60, 50, 40, 0.25) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 100%, rgba(40, 30, 22, 0.3) 0%, transparent 50%),
    var(--wall);
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  gap: 2.5rem;
}

.header {
  text-align: center;
}

.header-brand {
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: 0.6rem;
}

.header-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--cream);
}

.header-rule {
  width: 60px;
  height: 1px;
  background: #3a3530;
  border: none;
  margin: 0.8rem auto;
}

.header-subtitle {
  font-size: 1rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.shelf-unit {
  width: 100%;
  max-width: 1100px;
}

.bottles {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.8rem, 2.5vw, 2.2rem);
  padding: 0 1re.........完整代码请登录后点击上方下载按钮下载查看