zdog实现三维文字牌旋转动画效果代码-html代码-BFW代码库

zdog实现三维文字牌旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：zdog实现三维文字牌旋转动画效果代码

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

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

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

  
<style>
body {
	margin: 0;
	color: hsl(0 0% 100%);
	background: hsl(233 12% 13%);
	font-family: system-ui;
	min-block-size: 100svb;
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	--ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

canvas {
	display: block;
	inline-size: 100%;
	max-inline-size: 500px;
}

button {
	--angle: 115deg;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: hsl(0 0% 100%);
	background: hsl(225 10% 8%);
	padding: 0.5rem 1rem;
	border: 3px solid;
	border-image-slice: 1;
	border-image-source: linear-gradient(
		var(--angle),
		hsl(135 57% 56%),
		hsl(48 95% 63%),
		hsl(270 71% 65%),
		hsl(197 99% 53%),
		hsl(144 58% 54%)
	);
}

@supports (background: paint(canvas)) {
	@property --angle {
		syntax: "<angle>";
		initial-value: 0deg;
		inherits: false;
	}

	button {
		--angle: 0deg;
		transition: --angle 1s var(--ease-in-out-sine);
	}

	button:hover,
	button:focus {
		--angle: -180deg;
	}

	button:focus {
		outline-offset: 4px;
	}

	button:active {
		--angle: -200deg;
	}

	button[data-state="spin"] {
		transition-duration: 0.4s;
		transition-timing-function: var(--ease-out-back);
		--angle: 0deg;
	}
}
</style>

  
 .........完整代码请登录后点击上方下载按钮下载查看