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