gsap+Physics2DPlugin3模拟扑克牌发牌动画效果代码-html代码-BFW代码库

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

代码语言：html

所属分类：动画

代码描述：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(30vmin *(3.5 / 2.5));
	background:rgba(0,0,0,0.4);
	position:absolute;
	top:0;
	left:0;
	border-radius:1vmin;
	background-color:#f2f2f2;
	box-shadow:0 3px 0 0 #6e6861;
	border:1px solid #6e6861;
	cursor:-webkit-grab;
	cursor:grab;
	overflow:hidden
}
.card:active {
	cursor:-webkit-grabbing;
	cursor:grabbing
}
.card::before {
	content:"";
	position:absolute;
	width:calc(100% - 4vmin);
	height:calc(100% - 4vmin);
	border:2vmin solid #f2f2f2;
	background-image:linear-gradient(135deg,#ef0000 25%,transparent 25%),linear-gradient(225deg,#ef0000 25%,transparent 25%),linear-gradient(45deg,#ef0000 25%,transparent 25%),linear-gradient(315deg,#ef0000 25%,#fbfbfd 25%);
	background-position:2vmin 0,2vmin 0,0 0,0 0;
	background-size:2vmin 2vmin;
	background-repeat:repeat
}
.heads-up {
	position:fixed;
	top:10px;
	left:10px;
	padding:10px 20px;
	background-color:#f2e900;
	border:1px solid black;
	border-radius:4px;
	display:flex;
	font-size:1.2rem;
	box-shadow:3px 3px 0 0 black;
	z-index:10
}
#play {
	position:fixed;
	padding:10px 20px;
	border:2px solid black;
	box-shadow:3px 3px 0 0 black;
	border-radius:5px;
	font-size:1.8rem;
	background-color:#903efa;
	color:white;
	z-index:1;
	cursor:pointer
}

 </style>
</head>

<body>

    <!-- partial:index.partial.html -->
    <div class="table"></div>
    <div class="deck">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="c.........完整代码请登录后点击上方下载按钮下载查看