gsap+Physics2DPlugin3模拟扑克牌发牌动画效果代码

代码语言:html

所属分类:动画

代码描述:gsap+Physics2DPlugin3模拟扑克牌发牌动画效果代码

代码标签: gsap Physics2DPlugin3 模拟 扑克 发牌 动画

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

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

<head>
    <meta charset="UTF-8">
 <style>
:root {
	--noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")
}
body {
	height:100vh;
	display:grid;
	place-items:center;
	perspective:1000px;
	overflow:hidden
}
body * {
	transform-style:preserve-3d;
	box-sizing:border-box
}
body::after {
	content:"";
	position:absolute;
	background:var(--noise) 0/25vh repeat;
	mix-blend-mode:soft-light;
	width:100%;
	height:100%
}
.table {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:linear-gradient(to top,#206825,#449b45)
}
.deck {
	position:absolute;
	width:30vmin;
	height:calc(30vmin *(3.5 / 2.5));
	bottom:0;
	left:50%;
	transform:translate(-50%,35%) rotatex(45deg);
	z-index:10
}
.card {
	width:30vmin;
	height:calc.........完整代码请登录后点击上方下载按钮下载查看

网友评论0