按住才能解锁的按钮

最新推荐文章于 2024-09-28 22:57:04 发布

timi先生

最新推荐文章于 2024-09-28 22:57:04 发布

阅读量407

点赞数 6

分类专栏： CSS 文章标签： html5 css javascript

本文链接：https://blog.csdn.net/qq_35241329/article/details/135407765

版权

CSS 专栏收录该内容

81 篇文章 10 订阅

订阅专栏

文章描述了一个具有趣味性设计的前端网站，使用JavaScript实现动态CSS动画效果，用户可以通过点击增加或减少百分比。分享的焦点在于其易懂的内容和独特的视觉体验。

摘要由CSDN通过智能技术生成

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

看一下效果：
在这里插入图片描述
下面是源码：

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

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

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

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);
});