js+css实现鼠标滚动全屏图文立方体幻灯片效果代码-html代码-BFW代码库

js+css实现鼠标滚动全屏图文立方体幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：js+css实现鼠标滚动全屏图文立方体幻灯片效果代码

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

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

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

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: dark;

  --dark-bg: #1c1814;
  --dark-fg: #ede8df;
  --dark-muted: #8a7b6e;
  --light-bg: #f0ece3;
  --light-fg: #0d0d14;
  --light-muted: #9a9aaa;

  --accent-dark: #d4a84b;
  --accent-light: #3a6e00;

  --bg: var(--dark-bg);
  --fg: var(--dark-fg);
  --muted: var(--dark-muted);
  --accent: var(--accent-dark);

  --font-display: "Bebas Neue", sans-serif;
  --font-mono: "DM Mono", monospace;
  --hairline: 0.0625rem;
  --ui-inset: 2rem;
  --card-bg: rgba(28, 24, 20, 0.82);
  --card-border: rgba(212, 168, 75, 0.2);
  --nav-x: calc(var(--ui-inset) + 0.125rem);
  --reveal-offset: 0.625rem;
  --reveal-duration: 0.5s;
  --z-ui: 10;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--light-bg);
  --fg: var(--light-fg);
  --muted: var(--light-muted);
  --accent: var(--accent-light);
  --card-bg: rgba(240, 236, 227, 0.08);
  --card-border: rgba(58, 110, 0, 0.14);
}

html {
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
  pointer-events: none;
}

#cube {
  --s: min(74vw, 74vh, 560px);
  width: var(--s);
  height: var(--s);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(90deg) rotateY(0deg);
  will-change: transform;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 48px
    ),
    #14100d;
}

:root[data-theme="light"] .face {
  background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.05) 0,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.05) 0,
      rgba(0, 0, 0, 0.05) 1px,
      transparent 1px,
      transparent 48px
    ),
    #ddd8cf;
}

.fac.........完整代码请登录后点击上方下载按钮下载查看