按住才能解锁的按钮

前些天发现了一个人工智能学习网站，通俗易懂，风趣幽默，最重要的屌图甚多，忍不住分享一下给大家。点击跳转到网站。

看一下效果：

下面是源码：

<button class="collab" style="--pct: 0%; --speed: 200ms">
	0%
button>

@property --pct {
	inherits: true;
	initial-value: 0%;
	syntax: "";
}

@property --speed {
	inherits: true;
	initial-value: 200ms;
	syntax: "";
}

body {
	display: flex;
	height: 100dvh;
	place-content: center;
}

.collab {
	aspect-ratio: 1;
	background: linear-gradient(to bottom in oklch, oklch(0.9 0.025 0) 0 0)
			padding-box,
		conic-gradient(
				from 0deg in oklch,
				oklch(0.85 0.37 0) 0%,
				oklch(0.85 0.37 50) var(--pct),
				oklch(0.85 0.37 50 / 0) var(--pct)
			)
			border-box;
	border: 0.5rem solid transparent;
	border-radius: 50%;
	margin-block: auto;
	transition: --pct var(--speed) linear;
	width: 100px;
}

const MAX_AMOUNT_PER_PERSON = 100;
const INTERVAL_SIZE = 10_000 / MAX_AMOUNT_PER_PERSON;
const btn = document.querySelector(".collab");

let holding = false;

function updatePropertyPct(amount) {
	clearInterval(holding);

	holding = setInterval(() => {
		const pct = getComputedStyle(btn).getPropertyValue("--pct");
		const newVal = Math.max(
			0,
			Math.min(parseInt(pct) + amount, MAX_AMOUNT_PER_PERSON)
		);

		if (newVal <= 0 || newVal > MAX_AMOUNT_PER_PERSON) {
			clearInterval(holding);
		}

		btn.style.setProperty("--pct", `${newVal}%`);
		btn.style.setProperty("--speed", `${INTERVAL_SIZE - 10}ms`);
		btn.innerText = `${newVal}%`;
	}, INTERVAL_SIZE);
}

btn.addEventListener("mousedown", () => {
	updatePropertyPct(1);
});

btn.addEventListener("mouseup", (e) => {
	updatePropertyPct(-1);
});