js实现扑克牌组成三维旋涡洞排列动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现扑克牌组成三维旋涡洞排列动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style-type: none; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; background: #1c1c1c; background: linear-gradient(45deg, #1c1c1c 0%, #050547 50%, black 100%); } .container { width: 400px; height: 400px; border-radius: 4px; display: flex; justify-content: center; align-items: center; perspective: 800px; perspective-origin: top right; } .container .whirlpool { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; } .container .whirlpool > * { position: absolute; font-size: 10rem; height: 156px; border-radius: 5px; background: #fff; line-height: 160px; margin: 10px; animation: whirlpool 5s linear infinite; } .restart-btn { position: absolute; top: 20px; left: 20px; padding: 5px 10px; border-radius: 100px; cursor: pointer; } </style> </head> <body > <div class="container"> <div class="whirlpool"> </div> </div> <button onclick="reStart()" class="restart-btn">Restart</button> <script > var cards = [ { card: "🂠", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂡", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂢", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂣", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂤", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂥", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂦", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂧", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂨", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂩", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂪", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂫", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂬", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂭", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂮", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂱", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂲", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂳", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂴", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂵", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂶", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂷", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂸", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂹", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂺", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂻", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂼", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂽", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂾", rotateY: 0, translateY: 0, scale: 1 }, { card: "🂿", rotateY: 0, translateY: 0, scale: 1 }, { card: "🃁", rotateY: 0, translateY: 0, scale: 1 }, { card: "🃂&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0