webgpu实现瓶子装流沙交互重力模拟动画代码-html代码-BFW代码库

webgpu实现瓶子装流沙交互重力模拟动画代码

代码语言：html

所属分类：动画

代码描述：webgpu实现瓶子装流沙交互重力模拟动画代码

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

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

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


  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@property --picker-radius {
	syntax: "<length> | <percentage>";
	inherits: true;
	initial-value: 0px;
}

body {
	--picker-radius: 0px;
	--picker-radius-open: 16vmin;
	--button-radius: 9vmin;
	background: #000;
	overflow: hidden;
	height: 100vh;
}

canvas {
	display: block;
	width: 100dvw;
	height: 100dvh;
	image-rendering: pixelated;
	touch-action: none;
	user-select: none;
}

select,
::picker(select) {
	appearance: base-select;
}

select {
	position: fixed;
	inset: 1.5rem 1.5rem auto auto;
	display: grid;
	place-items: center;
	width: var(--button-radius);
	height: var(--button-radius);
	background: #7a5c2e;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100vmin;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
	font-family: Inter;
	font-size: 15px;
	text-transform: uppercase;
	transition: background 0.3s;
	--picker-radius: 0;
}

select[data-selected="1"] {
	background: #7a5c2e;
}
select[data-selected="2"] {
	background: #8a2a20;
}
select[data-selected="3"] {
	background: #1a3f6e;
}
select[data-selected="4"] {
	background: #2a6e30;
}
select[data-selected="5"] {
	background: #5b2e7a;
}

::picker(select) {
	inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
	width: var(--button-radius);
	height: var(--button-radius);
	padding: 0;
	margin: 0;
	overflow: visible;
	background-color: #1a2a1a;
	border: none;
	border-radius: var(--button-radius);
	opacity: 0;
	transition: all 0.4s allow-discrete;
	--picker-radius: 0vmin;
}

option {
	/* Arc from 6 o'clock (0) to 9 o'clock (-π/2), distributed across siblings. */
	--angle: calc(
		0 + (-1.5708 - 0) * (sibling-index() - 1) / (sibling-count() - 1)
	);

	position: absolute;
	display: grid;
	place-items: center;
	width: var(--button-radius);
	height: var(--button-radius);
	padding: 0;
	margin: 0;
	border-radius: var(--button-radius);
	translate: calc(sin(var(--angle)) * var(--picker-radius))
		calc(cos(var(--angle)) * var(--picker-radius));
	transition-delay: calc(sibling-index() * 0.05s);
	transition-duration: 0.4s;
	transition-property: --picker-radius;
	font-family: Inter;
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

option[value="1"] {
	background: #7a5c2e;
} /* Sand */
option[value="2"] {
	background: #8a2a20;
} /* Red */
option[value="3"] {
	background: #1a3f6e;
} /* Blue */
option[value="4"] {
	background: #2a6e30;
} /* Green */
option[value="5"] {
	background: #5b2e7a;
} /* Purple */

:open::picker(select) {
	opacity: 1;
}
:open option {
	--picker-radius: var(--picker-radius-open);
}

@starting-style {
	:open::picker(select) {
		opacity: 0;
	}
	:open optio.........完整代码请登录后点击上方下载按钮下载查看