css3 animation+keyframes实现扫一扫效果

基本信息

源码名称：css3 animation+keyframes实现扫一扫效果

源码大小：0.05M

文件格式：.zip

开发语言：CSS

更新时间：2019-02-18

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: #aaa;
        }

        .bg,
        .pane {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            overflow: hidden;
        }

        .bg {
            position: relative;
            background: url(images/2.png) center center no-repeat;
            border: 1px solid #b0f9e4;
        }

        .pane {
            position: absolute;
            z-index: -1;
            background: url(images/4.png) center center no-repeat;
            animation: move 1.5s ease-in-out infinite ;
            -webkit-animation: move 1.5s ease-in-out infinite;
        }
        @keyframes move {
            from{top:-200px}
            to{top:0}
        }
        -webkit-@keyframes move {
            from{top:-200px}
            to{top:0}
        }
    </style>
</head>
<body>
    <div class="bg">
    <div class="pane"></div>
    </div>
</body>
</html>