Observer+gsap实现可换主题的三维滑板交互代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：Observer+gsap实现可换主题的三维滑板交互代码

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

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

<head>

  <meta charset="UTF-8">
  

  
<style>
:root {
  --border-size: 0.5vmin;
  --border-style: solid;
  --color-bolt: hsl(0deg 0% 40%);
  --color-border: hsl(0 0% 8%);
  --color-deck: hsl(10deg 10% 12%);
  --color-deck-trim: hsl(0deg 20% 90%);
  --color-text: hsl(0deg 0% 96%);
  --color-truck: hsl(0deg 0% 30%);
  --color-wheel: hsl(0deg 20% 80%);
}

body:has([value="lightning"]:checked) {
  --color-bolt: hsl(237deg 74% 55%);
  --color-border: hsl(215deg 76% 5%);
  --color-deck: hsl(215deg 76% 5%);
  --color-deck-trim: hsl(45deg 98% 49%);
  --color-text: hsl(45deg 98% 49%);
  --color-truck: hsl(237deg 74% 45%);
  --color-wheel: hsl(359deg 70% 44%);
}

body:has([value="holiday"]:checked) {
  --color-bolt: hsl(0deg 0% 98%);
  --color-border: hsl(120deg 59% 22%);
  --color-deck: radial-gradient(hsl(0deg 78% 60%) 15%, transparent 16%) 5vmin
      5vmin / 2vmin 2vmin,
    radial-gradient(hsl(0deg 78% 60%) 15%, transparent 16%) hsl(0deg 78% 52%) 0
      0 / 2vmin 2vmin;
  --color-deck-trim: hsl(0deg 0% 98%);
  --color-text: hsl(0deg 0% 98%);
  --color-truck: hsl(120deg 59% 22%);
  --color-wheel: hsl(0deg 0% 98%);
}

body:has([value="vibes"]:checked) {
  --color-bolt: hsl(0deg 0% 99%);
  --color-border: hsl(215deg 76% 5%);
  --color-deck: linear-gradient(
    45deg,
    hsl(240deg 71% 62%) 0%,
    hsl(263deg 68% 60%) 7%,
    hsl(281deg 63% 57%) 13%,
    hsl(298deg 58% 53%) 19%,
    hsl(311deg 73% 56%) 24%,
    hsl(321deg 91% 59%) 29%,
    hsl(327deg 100% 61%) 34%,
    hsl(332deg 100% 62%) 39%,
    hsl(339deg 100% 64%) 44%,
    hsl(348deg 100% 67%) 49%,
    hsl(358deg 100% 70%) 54%,
    hsl(10deg 100% 68%) 58%,
    hsl(19deg 100% 65%) 63%,
    hsl(28deg 100% 63%) 69%,
    hsl(35deg 100% 60%) 74%,
    hsl(40deg 100% 58%) 80%,
    hsl(45deg 100% 57%) 86%,
    hsl(49deg 100% 57%) 93%,
    hsl(55deg 93% 58%) 100%
  );
  --color-deck-trim: hsl(339deg 64% 96%);
  --color-text: hsl(0deg 0% 99%);
  --color-truck: hsl(45deg 0% 99%);
  --color-wheel: hsl(352deg 100% 81%);
}

body:has([value="smiles"]:checked) {
  --color-bolt: hsl(323deg 51% 55%);
  --color-deck-1: hsl(45deg 98% 49%);
  --color-deck-2: hsl(43deg 100% 40%);
  --color-deck: linear-gradient(var(--color-deck-1) 60%, transparent 61%) 51%
      77%/ 25vmin 5vmin no-repeat,
    radial-gradient(var(--color-deck-2) 15%, transparent 16%) 51% 0%/ 20vmin 20vmin
      no-repeat,
    radial-gradient(var(--color-deck-2) 15%, transparent 16%) 61.4% 7%/ 9vmin 9vmin
      no-repeat,
    radial-gradient(var(--color-deck-2) 15%, transparent 16%)
      var(--color-deck-1) 39% 7%/ 9vmin 9vmin no-repeat;
  --color-deck-trim: hsl(0 20% 100%);
  --color-text: hsl(43deg 100% 40%);
  --color-truck: hsl(0deg 0% 64%);
  --color-wheel: hsl(121deg 26% 39%);
}

body:has([value="pickle"]:checked) {
  --color-bolt: hsl(145deg 78% 15%);
  --color-border: hsl(145deg 78% 15%);
  --color-deck: radial-gradient(hsl(145deg 78% 44%) 15%, transparent 16%)
      0.25vmin 0 / 5vmin 5vmin,
    radial-gradient(hsl(145deg 78% 50%) 15%, transparent 16%)
      hsl(145deg 78% 44%) 0 0/ 5vmin 5vmin;
  --color-deck-trim: hsl(0deg 20% 100%);
  --color-text: hsl(145deg 78% 25%);
  --color-truck: hsl(145deg 78% 70%);
  --color-wheel: hsl(145deg 78% 29%);
}

body:has([value="png"]:checked) {
  --color-bolt: hsl(0deg 0% 0%);
  --color-deck: repeating-conic-gradient(white 0 90deg, lightgray 0 180deg) 0 0/5vmin
    5vmin;
  --color-deck-trim: hsl(0deg 20% 100%);
  --color-text: hsl(0deg 0% 0%);
  --color-truck: hsl(0deg 0% 84%);
  --color-wheel: hsl(0deg 0% 15%);
}

body:has([value="debug"]:checked) {
  --border-style: dashed;
  --color-bolt: red;
  --color-border: red;
  --color-deck: transparent;
  --color-deck-trim: transparent;
  --color-text: red;
  --color-truck: transparent;
  --color-wheel: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  overflow: hidden;
  font-family: system-ui;
  transform-style: preserve-3d;
  perspective: 600px;
  cursor: -webkit-grab;
  cursor: grab;
  transition: background-color 200ms ease-out;
}

body:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

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