js+css实现可调配置参数的彩色曲线圈圈动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js+css实现可调配置参数的彩色曲线圈圈动画效果代码

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

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

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

  
  
<style>
@layer reset, base, demo;

@layer demo {
	.controls-panel {
		position: absolute;
		top: 1rem;
		right: 1rem;

		background: rgba(78 170 246 / 0.5);
		backdrop-filter: blur(4px);
		border: 1px solid rgba(255 255 255 / 0.35);
		border-radius: 5px;
		width: var(--control-panel-width, 2rem);
		display: grid;
		grid-template-rows: var(--control-panel-rows, 2rem 0fr);
		transition: grid-template-rows 300ms ease-in-out var(--delay-reveal, 0ms),
			width 300ms ease-in-out var(--delay-width, 400ms);
	}
	.controls-panel > label {
		cursor: pointer;
		margin: 0;
		transition: rotate 300ms ease-in-out;
		display: grid;
		place-content: center end;
		color: white;
	}
	.controls-panel > label:hover > svg {
		rotate: 90deg;
	}
	.controls-panel > label > svg {
		--toggle-icon-scale: var(--toggle-config-scale, 1);
		grid-area: 1 / 1;
		margin-right: 0.25rem;
		width: 100%;
		transition: 300ms ease-in-out;
		scale: var(--toggle-icon-scale, 1);
	}
	.controls-panel > label > svg:last-of-type {
		--toggle-icon-scale: var(--toggle-close-scale, 0);
	}
	.controls-panel input[type="checkbox"] {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
	.controls-panel:has(input[type="checkbox"]:checked) {
		--control-panel-rows: 2rem 1fr;
		--control-panel-width: 280px;
		--delay-reveal: 400ms;
		--delay-width: 0ms;
		--toggle-close-scale: 1;
		--toggle-config-scale: 0;
	}

	.controls {
		overflow: hidden;
		display: grid;
		gap: 0.5rem;
	}
	.controls > div {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		padding-inline: 1rem;
	}
	.controls > div:last-child {
		margin-bottom: 1rem;
	}
	.controls > div > label {
		font-size: 0.75rem;
		text-align: right;
	}
	input[type="range"] {
		width: 100%;
	}
	/* color picker range slider */
	input[type="range"].color-picker {
		-webkit-appearance: none;
		width: 100%;
		height: 6px;
		border-radius: 5px;
		background: linear-gradient(
			to right,
			hsl(0, 100%, 50%),
			hsl(60, 100%, 50%),
			hsl(120, 100%, 50%),
			hsl(180, 100%, 50%),
			hsl(240, 100%, 50%),
			hsl(300, 100%, 50%),
			hsl(360, 100%, 50%)
		);
		outline: none;
		transition: background 0.2s;
	}

	input[type="range"].color-picker {
		--clr-thumb: black;
	}
	input[type="range"].color-picker::-webkit-slider-thumb {
		-webkit-appearance: none;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--clr-thumb);
		border: 2px solid white;
		cursor: pointer;
		transition: background 0.2s;
	}

	input[type="range"].color-picker::-moz-range-thumb {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: var(--clr-thumb);
		border: 2px solid white;
		cursor: pointer;
		transition: background 0.2s;
	}

	.wrapper {
		--inner-duration: 16s;
		--inner-delay-factor: calc(var(--inner-duration) / 100);
		--inner-size: 200px;
		--inner-offset: -100px;
		--inner-radius: 50%;
		--outer-duration: calc(var(--inner-duration) * 1.5);
		--outer-delay-factor: calc(var(--inner-duration) / 5);
		--clr-even: var(--clr-1, hotpink);
		--clr-odd: var(--clr-2, steelblue);

		/* elements to add to controls:
		- timing function
		- scale
		*/
		--outer-timing-function: linear;
		--inner-timing-function: ease-in-out;
		--inner-scale: 1.2;

		display: grid;
		place-content: center;
	}
	.ani {
		grid-area: 1 / 1;
		display: grid;
		place-content: center;
		animation: var(--outer-duration) ani-outer var(--outer-timing-function)
			infinite;
		animation-delay: calc(var(--outer-delay-factor) * var(--j) * -1);
	}
	.ani:nth-child(odd) > div {
		--clr: var(--clr-odd);
	}
	.ani > div {
		-.........完整代码请登录后点击上方下载按钮下载查看