tweakpane实现可调节彩色正玄线条堆叠动画效果代码-html代码-BFW代码库

tweakpane实现可调节彩色正玄线条堆叠动画效果代码

代码语言：html

所属分类：动画

代码描述：tweakpane实现可调节彩色正玄线条堆叠动画效果代码

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

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

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

  
  
<style>
:root {
  --speed: 3;
  --radius: 20;
  --power4: linear(
    0 0%, 0.0012 14.95%, 0.0089 22.36%,
    0.0297 28.43%, 0.0668 33.43%,
    0.0979 36.08%, 0.1363 38.55%,
    0.2373 43.07%, 0.3675 47.01%,
    0.5984 52.15%, 0.7121 55.23%,
    0.8192 59.21%, 0.898 63.62%,
    0.9297 66.23%, 0.9546 69.06%,
    0.9733 72.17%, 0.9864 75.67%,
    0.9982 83.73%, 1 100%
  );
  --power2: linear(
    0 0%, 0.0036 9.62%, 0.0185 16.66%,
    0.0489 23.03%, 0.0962 28.86%,
    0.1705 34.93%, 0.269 40.66%,
    0.3867 45.89%, 0.5833 52.95%,
    0.683 57.05%, 0.7829 62.14%,
    0.8621 67.46%, 0.8991 70.68%,
    0.9299 74.03%, 0.9545 77.52%,
    0.9735 81.21%, 0.9865 85%,
    0.9949 89.15%, 1 100%
  );
  --ease: var(--power2);
}

* {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

html {
  color-scheme: dark only;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
}

form {
	display: grid;
	grid-template-columns: 1fr auto;
	position: fixed;
	top: 1rem;
	right: 1rem;
	gap: 1rem;
}

body::before {
	--size: 20px;
	--line: color-mix(in lch, canvasText 10%, hsl(0 0% 100% / 0.25));
	content: '';
	height: 100vh;
	width: 100vw;
	position: fixed;
	background: linear-gradient(
				90deg,
				var(--line) 1px,
				transparent 1px var(--size)
			)
			50% 50% / var(--size) var(--size),
		linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
			var(--size) var(--size);
	-webkit-mask: linear-gradient(-25deg, transparent 65%, white);
	        mask: linear-gradient(-25deg, transparent 65%, white);
	top: 0;
	transform-style: flat;
	pointer-events: none;
	z-index: -1;
}

.rings {
  width: 50vmin;
  max-width: 300px;
  aspect-ratio: 1;
  position: relative;
  transform: translate3d(0, 0, 100vmin) rotateX(-32deg) rotateY(-32deg.........完整代码请登录后点击上方下载按钮下载查看