zoukankan html css js c++ java

模拟银行吞卡动画

今天小颖利用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>

查看全文

相关阅读:
Spring:(八) mybatis-spring整合
 Spring:(七) Aop
spring boot中@ControllerAdvice的用法
 spring boot中注册拦截器
 spring boot 中通过CORS实现跨域
 spring boot 中的路径映射
 浅析java中的string
java并发编程如何预防死锁
 Redis集群增加节点和删除节点
 Redis删除集群以及重新启动集群

原文地址：https://www.cnblogs.com/yingzi1028/p/6030951.html