首页 > 软件 > 应用软件 > 学习 > css3 animation+keyframes实现扫一扫效果

css3 animation+keyframes实现扫一扫效果

xiaowei

软件大小:54KB

下载次数:1次

软件语言:简体中文

软件评级:6

软件厂商:极全网

软件授权:免费

应用平台：windows

更新时间:2025-01-30

立即下载

详情介绍-作者:xiaowei-来源: 极全网 -如有问题点击:在线客服帮助

【极全网】css3 animation+keyframes实现扫一扫效果目录1个子文件夹1个文件3个

<!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>

上一篇：好例子网_二维码

下一篇：云知声语音合成

-1