欢迎使用CSDN-markdown编辑器

最新推荐文章于 2024-01-17 14:32:29 发布

总是忘记昵称

最新推荐文章于 2024-01-17 14:32:29 发布

阅读量276

点赞数

分类专栏： css问题

本文链接：https://blog.csdn.net/huahuili/article/details/51735111

版权

css问题专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .demo{
        width:400px;
        margin: 50px auto;
        position: relative;
    }
    .demo i{
        display: block;
        width:20px;
        height: 20px;
        background:#333;
        border-radius:50%;
        position: absolute;
    }
    .demo i:nth-child(1){animation:loading-3 2s linear 0s infinite;}
    .demo i:nth-child(2){animation:loading-3 2s linear -.4s infinite;}
    .demo i:nth-child(3){animation:loading-3 2s linear -.8s infinite;}
    .demo i:nth-child(4){animation:loading-3 2s linear -1.2s infinite;}
    .demo i:nth-child(5){animation:loading-3 2s linear -1.6s infinite;}

    @keyframes loading-3{
        0%{
            left:100px;
            top:0;
        }
        80%{
            left:0px;
            top:0;
        }
        85%{
            left:0px;
            top:-20px;
            width:20px;
            height: 20px;
        }
        90%{
            width:40px;
            height: 20px;
        }
        95%{
            width: 20px;
            height: 20px;
            top:-20px;
            left:100px;
        }
        100%{
            left:100px;
            top:0px;
        }
    }
    </style>
</head>
<body>
    <div class="demo">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</body>
</html>