欢迎使用CSDN-markdown编辑器

来源：互联网发布：淘宝奇葩商品排行编辑：程序博客网时间：2024/05/07 13:43

这里写图片描述

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

0 0