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

代码语言:html

所属分类:三维

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

代码标签: 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%.........完整代码请登录后点击上方下载按钮下载查看

网友评论0