模拟银行吞卡动画

今天小颖利用CSS Animations模拟银行吞卡动画做了一个简单的动画嘻嘻，有兴趣的可以把代码复制下来自己试试。下面一起来看看html+css代码吧

html代码：

<body>
    <div class="main">
        <div class="card-slot">

        </div>
        <div class="person-view">
            <div class="person-img">
            </div>
        </div>

    </div>
</body>

css代码：

    <style media="screen">
        .main {
            width: 30%;
            margin: 0 auto;
        }

        .card-slot {
            min-height: 15px;
            border: 3px solid gray;
            width: 260px;
        }

        .person-view {
            width: 230px;
            padding: 15px 0 0 20px;
        }

        .person-img {
            height: 240px;
            background-image: url(images/bgNav.png);
            background-repeat: no-repeat;
            -moz-animation: animations 3s ease forwards;
            -webkit-animation: animations 3s ease forwards;
            animation: animations 3s ease forwards;
        }

        @-webkit-keyframes animations {
            0% {
                -webkit-transform: translate(0);
            }
            20% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -15px;
            }
            40% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -30px;
            }
            60% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -45px;
            }
            80% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -60px;
            }
            100% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -70px;
            }
        }

        @-moz-keyframes animations {
            0% {
                -webkit-transform: translate(0);
            }
            20% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -15px;
            }
            40% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -30px;
            }
            60% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -45px;
            }
            80% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -60px;
            }
            100% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -70px;
            }
        }

        @keyframes animations {
            0% {
                -webkit-transform: translate(0);
            }
            20% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -15px;
            }
            40% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -30px;
            }
            60% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -45px;
            }
            80% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -60px;
            }
            100% {
                -webkit-transform: translate(0, -16px);
                background-position-y: -70px;
            }
        }
    </style>

相关阅读:
listView控件演示程序
 猪悟能淘宝商品下载专家v3版开发手记
 c# WebClient类
 分隔控件splitter演示程序
 C#中SESSIONID的获取
 工具栏toolBar演示程序
 Cookie总结
 C#获取网页源码并且自动判断网页字符集编码
 如何在Google Code上建立私有代码版本库
 iOS应用程序生命周期(前后台切换,应用的各种状态)详解
原文地址：https://www.cnblogs.com/yingzi1028/p/6030951.html