js实现带音乐的环环相扣穿越洞穴动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：js实现带音乐的环环相扣穿越洞穴动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@charset "UTF-8";
body,
.scene, .side::after, .side::before,
.sound,
.camera,
.rotate,
.scale,
.translate,
.ring,
.side,
.circle {
  position: absolute;
  transform-style: preserve-3d;
}

.side::after, .side::before, .scene,
.sound,
.camera,
.rotate,
.scale,
.translate,
.ring,
.side,
.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

body,
.scene {
  display: grid;
  place-self: center;
}
body > *,
.scene > * {
  place-self: center;
}

:root {
  --perspective: 400vmin;
}

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

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  perspective: var(--perspective);
  background: var(--background, #000);
}

.themes {
  z-index: 10;
}
@media screen and (orientation: portrait) {
  .themes {
    --test: portrait;
  }
}
@media screen and (orientation: landscape) {
  .themes {
    --test: landscape;
  }
}
.themes.horizontal {
  width: 100vw;
}
.themes.vertical {
  height: 100vh;
}
.themes-trigger, .themes-menu {
  position: absolute;
}
.themes-trigger, .themes-select {
  height: 48px;
  width: 48px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 50%;
  cursor: pointer;
}
.themes-menu {
  display: flex;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.5s ease-in-out;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.themes-menu::-webkit-scrollbar-track {
  background: transparent;
}
.themes-menu::-webkit-scrollbar-thumb {
  background: var(--stroke, gray);
  border-radius: 10px;
}
.themes-menu::-webkit-scrollbar-thumb:hover {
  background: var(--hover, darkgray);
}
.themes.horizontal .themes-menu {
  flex-wrap: nowrap;
  overflow-x: scroll;
  height: 78px;
  width: calc(100% - 48px - 20px);
  bottom: -78px;
  /* width */
}
.themes.horizontal .themes-menu::-webkit-scrollbar {
  height: 10px;
}
.themes.vertical .themes-menu {
  flex-wrap: wrap;
  overflow-y: scroll;
  height: calc(100% - 48px - 20px);
  width: 78px;
  right: -78px;
  /* width */
}
.themes.vertical .themes-menu::-webkit-scrollbar {
  width: 10px;
}
.themes-select {
  flex: 0 0 48px;
  border: 2.5px solid var(--stroke);
  background: linear-gradient(var(--background) 0% 25%, var(--stroke) 25% 50%, var(--fill) 50% 75%, var(--hover) 75% 100%);
}
.themes.horizontal .themes-select {
  margin: 10px 5px;
}
.themes.vertical .themes-select {
  margin: 5px 10px;
}
.themes-trigger {
  right: 20px;
  bottom: 10px;
  background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
}
.themes-trigger, .themes-trigger::after {
  display: flex;
  justify-content: center;
  align-items: center;
}
.themes-trigger::after {
  content: "X";
  opacity: 0;
  border-radius: 50%;
  height: 48px;
  width: 48px;
  font-size: 32px;
  font-weight: bold;
  color: #000;
  transition: 0.35s ease-in-out;
  transition-property: opacity, color;
}
.themes-trigger:hover::after {
  color: #fff;
}
.themes-trigger:checked::after {
  opacity: 1;
}
.themes.horizontal .themes-trigger {
  right: 10px;
  bottom: 20px;
}
.themes.horizontal .themes-trigger:checked + .themes-menu {
  transform: translatey(-78px);
}
.themes.vertical .themes-trigger {
  right: 20px;
  bottom: 10px;
}
.themes.vertical .themes-trigger:checked + .themes-menu {
  transform: translatex(-78px);
}

:root {
  --sides: 75;
  --direction: 1;
}

.themes {
  z-index: 10;
}

.sound {
  z-index: 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  bottom: 10px;
  left: 10px;
  background: none;
  cursor: pointer;
  font-size: 2.5em;
}
.sound::after {
  content: "🎵";
  color: transparent;
  text-shadow: 0 0 0 var(--fill);
}

.camera {
  transform: translatez(400vmin);
}

.translate {
  transform: translatex(49.9561415049vmin);
}

.rotate {
  -webkit-animation: rotatez 45s linear infinite;
          animation: rotatez 45s linear infinite;
  transform-origin: -49.9561415049vmin center;
}

.ring {
  -webkit-animation: rotatey 45s linear infinite;
          animation: rotatey 45s linear infinite;
}
.ring .side:nth-child(1) {
  --theta: 0deg;
  --gamma: 2.4deg;
}
.ring .side:nth-child(2) {
  --theta: 4.8deg;
  --gamma: 7.2deg;
}
.ring .side:nth-child(3) {
  --theta: 9.6deg;
  --gamma: 12deg;
}
.ring .side:nth-child(4) {
  --theta: 14.4deg;
  --gamma: 16.8deg;
}
.ring .side:nth-child(5) {
  --theta: 19.2deg;
  --gamma: 21.6deg;
}
.ring .side:nth-child(6) {
  --theta: 24deg;
  --gamma: 26.4deg;
}
.ring .side:nth-child(7) {
  --theta: 28.8deg;
  --gamma: 31.2deg;
}
.ring .side:nth-child(8) {
  --theta: 33.6deg;
  --gamma: 36deg;
}
.ring .side:nth-child(9) {
  --theta: 38.4deg;
  --gamma: 40.8deg;
}
.ring .side:nth-child(10) {
  --theta: 43.2deg;
  --gamma: 45.6deg;
}
.ring .side:nth-child(11) {
  --theta: 48deg;
  --gamma: 50.4deg;
}
.ring .side:nth-child(12) {
  --theta: 52.8deg;
  --gamma: 55.2deg;
}
.ring .side:nth-child(13) {
  --theta: 57.6deg;
  --gamma: 60deg;
}
.ring .side:nth-child(14) {
  --theta: 62.4deg;
  --gamma: 64.8deg;
}
.ring .side:nth-child(15) {
  --theta: 67.2deg;
  --gamma: 69.6deg;
}
.ring .side:nth-child(16) {
  --theta: 72deg;
  --gamma: 74.4deg;
}
.ring .side:nth-child(17) {
  --theta: 76.8deg;
  --gamma: 79.2deg;
}
.ring .side:nth-child(18) {
  --theta: 81.6deg;
  --gamma: 84deg;
}
.ring .side:nth-child(19) {
  --theta: 86.4deg;
  --gamma: 88.8deg;
}
.ring .side:nth-child(20) {
  --theta: 91.2deg;
  --gamma: 93.6deg;
}
.ring .side:nth-child(21) {
  --theta: 96deg;
  --gamma: 98.4deg;
}
.ring .side:nth-child(22) {
  --theta: 100.8deg;
  --gamma: 103.2deg;
}
.ring .side:nth-child(23) {
  --theta: 105.6deg;
  --gamma: 108deg;
}
.ring .side:nth-child(24) {
  --theta: 110.4deg;
  --gamma: 112.8deg;
}
.ring .side:nth-child(25) {
  --theta: 115.2deg;
  --gamma: 117.6deg;
}
.ring .side:nth-child(26) {
  --theta: 120deg;
  --gamma: 122.4deg;
}
.ring .side:nth-child(27) {
  --theta: 124.8deg;
  --gamma: 127.2deg;
}
.ring .side:nth-child(28) {
  --theta: 129.6deg;
  --gamma: 132deg;
}
.ring .side:nth-child(29) {
  --theta: 134.4deg;
  --gamma: 136.8deg;
}
.ring .side:nth-child(30) {
  --theta: 139.2deg;
  --gamma: 141.6deg;
}
.ring .side:nth-child(31) {
  --theta: 144deg;
  --gamma: 146.4deg;
}
.ring .side:nth-child(32) {
  --theta: 148.8deg;
  --gamma: 151.2deg;
}
.ring .side:nth-child(33) {
  --theta: 153.6deg;
  --gamma: 156deg;
}
.ring .side:nth-child(34) {
  --theta: 158.4deg;
  --gamma: 160.8deg;
}
.ring .side:nth-child(35) {
  --theta: 163.2deg;
  --gamma: 165.6deg;
}
.ring .side:nth-child(36) {
  --theta: 168deg;
  --gamma: 170.4deg;
}
.ring .side:nth-child(37) {
  --theta: 172.8deg;
  --gamma: 175.2deg;
}
.ring .side:nth-child(38) {
  --theta: 177.6deg;
  --gamma: 180deg;
}
.ring .side:nth-child(39) {
  --theta: 182.4deg;
  --gamma: 184.8deg;
}
.ring .side:nth-child(40) {
  --theta: 187.2deg;
  --gamma: 189.6deg;
}
.ring .side:nth-child(41) {
  --theta: 192deg;
  --gamma: 194.4deg;
}
.ring .side:nth-child(42) {
  --theta: 196.8deg;
  --gamma: 199.2deg;
}
.ring .side:nth-child(43) {
  --theta: 201.6deg;
  --gamma: 204deg;
}
.ring .side:nth-child(44) {
  --theta: 206.4deg;
  --gamma: 208.8deg;
}
.ring .side:nth-child(45) {
  --theta: 211.2deg;
  --gamma: 213.6deg;
}
.ring .side:nth-child(46) {
  --theta: 216deg;
  --gamma: 218.4deg;
}
.ring .side:nth-child(47) {
  --theta: 220.8deg;
  --gamma: 223.2deg;
}
.ring .side:nth-child(48) {
  --theta: 225.6deg;
  --gamma: 228deg;
}
.ring .side:nth-child(49) {
  --theta: 230.4deg;
  --gamma: 232.8deg;
}
.ring .side:nth-child(50) {
  --theta: 235.2deg;
  --gamma: 237.6deg;
}
.ring .side:nth-child(51) {
  --theta: 240deg;
  --gamma: 242.4deg;
}
.ring .side:nth-child(52) {
  --theta: 244.8deg;
  --gamma: 247.2deg;
}
.ring .side:nth-child(53) {
  --theta: 249.6deg;
  --gamma: 252deg;
}
.ring .side:nth-child(54) {
  --theta: 254.4deg;
  --gamma: 256.8deg;
}
.ring .side:nth-child(55) {
  --theta: 259.2deg;
  --gamma: 261.6deg;
}
.ring .side:nth-child(56) {
  --theta: 264deg;
  --gamma: 266.4deg;
}
.ring .side:nth-child(57) {
  --theta: 268.8deg;
  --gamma: 271.2deg;
}
.ring .side:nth-child(58) {
  --theta: 273.6deg;
  --gamma: 276deg;
}
.ring .side:nth-child(59) {
  --theta: 278.4deg;
  --gamma: 280.8deg;
}
.ring .side:nth-child(60) {
  --theta: 283.2deg;
  --gamma: 285.6deg;
}
.ring .side:nth-child(61) {
  --theta: 288deg;
  --gamma: 290.4deg;
}
.ring .side:nth-child(62) {
  --theta: 292.8deg;
  --gamma: 295.2deg;
}
.ring .side:nth-child(63) {
  --theta: 297.6deg;
  --gamma: 300deg;
}
.ring .side:nth-child(64) {
  --theta: 302.4deg;
  --gamma: 304.8deg;
}
.ring .side:nth-child(65) {
  --theta: 307.2deg;
  --gamma: 309.6deg;
}
.ring .side:nth-child(66) {
  --theta: 312deg;
  --gamma: 314.4deg;
}
.ring .side:nth-child(67) {
  --theta: 316.8deg;
  --gamma: 319.2deg;
}
.ring .side:nth-child(68) {
  --theta: 321.6deg;
  --gamma: 324deg;
}
.ring .side:nth-child(69) {
  --theta: 326.4deg;
  --gamma: 328.8deg;
}
.ring .side:nth-child(70) {
  --theta: 331.2deg;
  --gamma: 333.6deg;
}
.ring .side:nth-child(71) {
  --theta: 336deg;
  --gamma: 338.4deg;
}
.ring .side:nth-child(72) {
  --theta: 340.8deg;
  --gamma: 343.2deg;
}
.ring .side:nth-child(73) {
  --theta: 345.6deg;
  --gamma: 348deg;
}
.ring .side:nth-child(74) {
  --theta: 350.4deg;
  --gamma: 352.8deg;
}
.ring .side:nth-child(75) {
  --theta: 355.2deg;
  --gamma: 357.6deg;
}

.side::after, .side::before {
  content: "";
}
.side::after, .side::before {
  transform: rotatey(var(--angle)) translatez(49.9561415049vmin) rotatey(90deg);
  width: 10vmin;
  height: 10vmin;
  background: radial-gradient(transparent 0%, transparent 5%, var(--fill) 5.5%, var(--hover) 6%, var(--stroke) 6.5%, var(--background) 7%, var(--background) 100%);
}
.side::after {
  --angle: var(--theta);
}
.side::before {
  --angle: var(--gamma);
}

@-webkit-keyframes rotatez {
  to {
    transform: rotate3d(0, 0, 1, -1turn);
  }
}

@keyframes rotatez {
  to {
    transform: rotate3d(0, 0, 1, -1turn);
  }
}
@-webkit-keyframes rotatey {
  to {
    transform: rotate3d(0, 1, 0, calc(var(--direction, 1) * 1turn));
  }
}
@keyframes rotatey {
  to {
    transform: rotate3d(0, 1, 0, calc(var(--direction, 1) * 1turn));
  }
}
</style>


  
  
</head>

<body translate="no">
  
  <script >
      function getVariableCSS(name, source = document.documentElement) {
	return getComputedStyle(source).getPropertyValue(`--${na.........完整代码请登录后点击上方下载按钮下载查看