vue实现洗牌动画效果代码-html代码-BFW代码库

vue实现洗牌动画效果代码

代码语言：html

所属分类：动画

代码描述：vue实现洗牌动画效果代码，可以设置不同的速度

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bulma-0.3.1.css">
    <style>
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700");

        html, body, #app {
            height: 100%;
            background: ghostwhite;
        }

        .title {
            font-family: Roboto Slab,sans-serif;
            text-align: center;
            padding-top: 30px;
            margin-bottom: 0 !important;
            font-weight: 300;
            font-size: 3rem;
        }

        .vue-logo {
            height: 55px;
            position: relative;
            top: 10px;
        }

        .speed-buttons {
            text-align: center;
            padding-top: 30px;
        }
        .speed-buttons .button {
            height: 2.50em;
        }

        .main-buttons {
            display: block;
            margin: 0 auto;
            text-align: center;
            padding-top: 30px;
            margin-bottom: 0 !important;
        }

        .count-section {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .fas {
            padding-left: 5px;
        }

        .deck {
            margin-left: 30px;
            padding-top: 30px;
        }

        .card {
            width: 75px;
            height: 100px;
            float: left;
            margin-right: 5px;
            margin-bottom: 5px;
            border-radius: 2px;
        }

        .card__suit {
            width: 100%;
            display: block;
        }

        .card__suit--top {
            text-align: left;
            padding-left: 5px;
        }

        .card__suit--bottom {
            position: absolute;
            bottom: 0px;
            text-align: left;
            transform: rotate(180deg);
            padding-left: 5px;
        }

        .card__number {
            width: 100%;
            position: absolute;
            top: 38%;
            text-align: center;
        }

        .red {
            color: #FF0000;
        }

        .black {
            color: #000;
        }

        .twitter-section {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        .twitter-section .fa-twitter-square {
            color: #00d1b2;
            font-size: 30px;
        }

        .shuffleSlow-move {
            transition: transform 2s;
        }

        .shuffleMedium-move {
            transition: transform 1s;
        }

        .shuffleFast-move {
            transition: transform 0.5s;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }

        .fade-enter, .fade-leave-to {
            opacity: 0;
        }

@media (max-width: 1210px) {
            .deck {
                position: initial;
                top: 0;
            }

            .twitter-section {
                display: none;
            }
        }
    </style>



</head>

<body translate="no">
    <div id="app">
        <div class="count-section">
            # of Shuffles: {{ shuffleCount }}
        </div>
        <h1 class="title">

            Card Shuffling
        </h1>
        <div class="speed-buttons">
            <button v-for="type in shuffleTypes"
                class="button is-small"
                :class="{ 'is-light': shuffleSpeed != `shuffle${type}` }"
                @click="shuffleSpeed = `sh.........完整代码请登录后点击上方下载按钮下载查看