deck-of-cards_一款非常炫酷的HTML5扑克牌卡片动画类库

Web前端开发网

fly63.com

首页资源工具文章教程栏目

deck-of-cards

网站地址:https://deck.of.cards

GitHub:https://github.com/deck-of-cards/deck-of-cards

网站描述:一款非常炫酷的HTML5扑克牌卡片动画类库

访问官网

GitHub

deck-of-cards是一款非常炫酷的html5扑克牌卡片动画类库。它使用纯js和css3来实现洗牌，发牌等功能。在这个效果的演示中，扑克牌使用SVG来制作，共给出了5种功能的演示效果。

安装

npm install deck-of-cards

例子

<html>
    <head>
        <title>Cards</title>
        <link rel="stylesheet" href="node_modules/deck-of-cards/example/example.css">
    </head>
    <body>
        <script src="node_modules/deck-of-cards/dist/deck.min.js"></script>
        <div id="container"></div>
        <script>
            var $container = document.getElementById('container');
            // create Deck
            var deck = Deck();
            // add to dom
            deck.mount($container);

            deck.cards.forEach(function (card, i) {
                card.setSide(Math.random() < 0.5 ? 'front' : 'back');
                // explode
                card.animateTo({
                    delay: 1000 + i * 2, // wait 1 second + i * 2 ms
                    duration: 500,
                    ease: 'quartOut',
                    x: Math.random() * window.innerWidth - window.innerWidth / 2,
                    y: Math.random() * window.innerHeight - window.innerHeight / 2
                });
            });
        </script>
    </body>
</html>

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2207