背景动画 / 背景图案

const BACKGROUNDS = {
  svg: 'svg(BallSorting.json)',
  image: 'url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=60")',
  css: 'css(background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(0,0,0,0.25)); filter: saturate(1.2))'
};

const SIZE_PRESETS = {
  normal: null,
  compact: { width: 340, height: 220 },
  wide: { width: '60vw', height: 260 },
  tall: { width: 360, height: '60vh' }
};

function openSingle(type, sizeKey) {
  const showIcon = !!document.getElementById('optIcon')?.checked;
  const popupAnimation = !!document.getElementById('optPopup')?.checked;
  const closeOnEsc = !!document.getElementById('optEsc')?.checked;
  const size = SIZE_PRESETS[sizeKey] || null;

  $.layer({
    title: 'Background: ' + type.toUpperCase(),
    text: 'Layer popup background demo.',
    background: BACKGROUNDS[type],
    width: size ? size.width : null,
    height: size ? size.height : null,
    icon: showIcon ? 'svg:BallSorting' : null,
    popupAnimation,
    closeOnEsc
  });
}

function openSteps(mode) {
  const showIcon = !!document.getElementById('optIcon')?.checked;
  const popupAnimation = !!document.getElementById('optPopup')?.checked;
  const closeOnEsc = !!document.getElementById('optEsc')?.checked;

  const same = BACKGROUNDS.svg;
  const a = BACKGROUNDS.svg;
  const b = BACKGROUNDS.image;

  $.layer({
    title: 'Step 1',
    text: 'Background should follow when different.',
    background: mode === 'same' ? same : a,
    icon: showIcon ? 'info' : null,
    popupAnimation,
    closeOnEsc,
    showCancelButton: true
  })
  .step({
    title: 'Step 2',
    text: 'Swipe left/right to see background transition.',
    background: mode === 'same' ? same : b
  })
  .step({
    title: 'Step 3',
    text: 'Back to the first background.',
    background: mode === 'same' ? same : a
  })
  .run();
}

<div class="demo-visual">
  <div class="controls" style="margin-bottom: 14px;">
    <label><input id="optIcon" type="checkbox" checked> showIcon</label>
    <label><input id="optPopup" type="checkbox" checked> popupAnimation</label>
    <label><input id="optEsc" type="checkbox" checked> closeOnEsc</label>
  </div>
  <div class="row">
    <button class="btn" type="button" onclick="openSingle('svg')">SVG 背景</button>
    <button class="btn" type="button" onclick="openSingle('image')">图片背景</button>
    <button class="btn" type="button" onclick="openSingle('css')">CSS 背景</button>
  </div>
  <div class="row" style="margin-top: 12px;">
    <button class="btn" type="button" onclick="openSingle('svg', 'compact')">SVG + 紧凑尺寸</button>
    <button class="btn" type="button" onclick="openSingle('image', 'wide')">图片 + 宽屏尺寸</button>
    <button class="btn" type="button" onclick="openSingle('css', 'tall')">CSS + 高屏尺寸</button>
  </div>
  <div class="split"></div>
  <div class="row" style="margin-top: 12px;">
    <button class="btn" type="button" onclick="openSteps('same')">Steps（相同背景）</button>
    <button class="btn" type="button" onclick="openSteps('diff')">Steps（不同背景）</button>
  </div>
</div>

/* Keep Layer above the doc UI */
.layer-overlay { z-index: 99999; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  font-size: 13px;
  color: #b7b7b7;
}
.controls label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.controls input { accent-color: var(--highlight-color); }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn:hover { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
.demo-visual { padding: 22px 24px; }
.hint { font-size: 12px; color: #8c8c8c; line-height: 1.5; margin-top: 10px; }
.split { margin-top: 10px; width: 100%; height: 1px; background: rgba(255,255,255,0.08); }