css实现手拿扑克牌动画效果代码-html代码-BFW代码库

css实现手拿扑克牌动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现手拿扑克牌动画效果代码

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

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

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    html,
body {
    height: 100%;
}

.poker {
    bottom: 0;
    height: 100vh;
    left: 50%;
    margin-left: -50vh;
    position: absolute;
    transform: scale(0.9);
    transform-origin: 50% 100%;
    width: 100vh;
}

.hand {
    bottom: -1vh;
    left: 0;
    position: absolute;
}

.finger,
.card {
    -webkit-animation: creep 3s ease-in-out 0s infinite alternate backwards;
            animation: creep 3s ease-in-out 0s infinite alternate backwards;
    background: no-repeat url('//repo.bfw.wiki/bfwrepo/images/poker.png') 0 0;
    background-size: 200vh 200vh;
    position: absolute;
    transform-origin: 50% 90%;
}

.pinky {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
    bottom: 0;
    height: 36vh;
    left: 42.8vh;
    transform-origin: 50% 100%;
    width: 36.6vh;
}

.ring {
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
    background-position: -37vh 0;
    bottom: 0.8vh;
    height: 47vh;
    left: 35.7vh;
    width: 47.4vh;
}

.middle {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    background-position: -85vh 0;
    bottom: 5.6vh;
    height: 62.5vh;
    left: 31.7vh;
    width: 47.2vh;
}

.index {
    background-position: -133vh 0;
    bottom: 16.6vh;
    height: 53.6vh;
    left: 25.6vh;
    width: 33.5vh;
}

.cards {
    -webkit-animation: creep 3s ease-in-out 0s infinite alternate;
            animation: creep 3s ease-in-out 0s infinite alternate;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform-origin: 40% 65%;
    width: 100%;
}

.ten {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    background-position: -0.1vh -65vh;
    bottom: 29.8vh;
    height: 61.2vh;
    left: 37.8vh;.........完整代码请登录后点击上方下载按钮下载查看