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

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

代码语言：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-bo.........完整代码请登录后点击上方下载按钮下载查看