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